web-mojo 2.1.1043 → 2.1.1087

package/dist/charts.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"charts.cjs.js","sources":["../src/extensions/charts/CircularProgress.js"],"sourcesContent":["/**\n * CircularProgress - Modern circular progress indicator component\n * Supports single/multi-segment progress, animations, gradients, and tooltips\n * Uses SVG for crisp rendering at any size\n */\n\nimport View from '@core/View.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nexport default class CircularProgress extends View {\n  constructor(options = {}) {\n    super({\n      className: `circular-progress ${options.className || ''}`,\n      ...options\n    });\n\n    // Size presets\n    this.SIZE_PRESETS = {\n      'xs': 40,\n      'sm': 60,\n      'md': 80,\n      'lg': 120,\n      'xl': 180\n    };\n\n    // Stroke width presets (auto-calculated based on size)\n    this.STROKE_PRESETS = {\n      'xs': 4,\n      'sm': 6,\n      'md': 8,\n      'lg': 12,\n      'xl': 16\n    };\n\n    // Core configuration\n    this.value = options.value !== undefined ? options.value : 0;\n    this.min = options.min !== undefined ? options.min : 0;\n    this.max = options.max !== undefined ? options.max : 100;\n\n    // Dimensions\n    this.sizePreset = (typeof options.size === 'string' && this.SIZE_PRESETS[options.size]) ? options.size : null;\n    this.size = this.resolveSize(options.size !== undefined ? options.size : 'md');\n    this.strokeWidth = options.strokeWidth === 'auto' || options.strokeWidth === undefined\n      ? this.getAutoStrokeWidth(options.size)\n      : options.strokeWidth;\n\n    // Colors & Styling\n    this.theme = options.theme || 'basic'; // 'basic', '3d', 'dark', 'light'\n    this.variant = options.variant || 'default';\n    this.color = options.color; // Will be set by applyVariant if not provided\n    this.trackColor = options.trackColor; // Will be set by applyTheme if not provided\n    this.textColor = options.textColor; // Custom text color\n    this.gradientColors = options.gradientColors || null;\n\n    // Apply theme (sets colors based on theme)\n    this.applyTheme();\n    \n    // Apply variant colors (sets this.color if not provided)\n    this.applyVariant();\n\n    // Arc configuration\n    this.rotation = options.rotation !== undefined ? options.rotation : -90; // Start at top\n    this.gap = options.gap || 0; // Gap in degrees (0 = full circle)\n\n    // Center content\n    this.showValue = options.showValue !== false;\n    this.valueFormat = options.valueFormat || 'percentage';\n    this.valueFormatter = options.valueFormatter || null;\n    this.label = options.label || null;\n    this.labelHtml = options.labelHtml || null;\n    this.icon = options.icon || null;\n\n    // Animation\n    this.animate = options.animate !== false;\n    this.animationDuration = options.animationDuration || 600;\n    this.animationEasing = options.animationEasing || 'ease-out';\n\n    // Visual options\n    this.rounded = options.rounded !== false;\n    this.shadow = options.shadow || false;\n\n    // Interaction\n    this.clickable = options.clickable || false;\n    this.tooltip = options.tooltip || null;\n    this.tooltipPlacement = options.tooltipPlacement || 'top';\n\n    // Multi-segment mode\n    this.segments = options.segments || null;\n    this.segmentGap = options.segmentGap || 2; // Gap between segments in degrees\n\n    // DataFormatter instance\n    this.dataFormatter = dataFormatter;\n\n    // Internal state\n    this.svg = null;\n    this.centerElement = null;\n    this.popover = null;\n    this.gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;\n  }\n\n  resolveSize(size) {\n    if (typeof size === 'string' && this.SIZE_PRESETS[size]) {\n      return this.SIZE_PRESETS[size];\n    }\n    return typeof size === 'number' ? size : this.SIZE_PRESETS.md;\n  }\n\n  getAutoStrokeWidth(size) {\n    if (typeof size === 'string' && this.STROKE_PRESETS[size]) {\n      return this.STROKE_PRESETS[size];\n    }\n    // Auto-calculate based on size\n    const actualSize = this.resolveSize(size);\n    if (actualSize <= 40) return 4;\n    if (actualSize <= 60) return 6;\n    if (actualSize <= 80) return 8;\n    if (actualSize <= 120) return 12;\n    return 16;\n  }\n\n  applyTheme() {\n    const themes = {\n      'basic': {\n        trackColor: '#e9ecef',\n        textColor: null, // Use default\n        backgroundColor: null\n      },\n      'shadowed': {\n        trackColor: '#d1d5db',\n        textColor: null,\n        backgroundColor: null,\n        shadow: true\n      },\n      'dark': {\n        trackColor: '#374151',\n        textColor: '#e5e7eb',\n        backgroundColor: '#1f2937'\n      },\n      'light': {\n        trackColor: '#f3f4f6',\n        textColor: '#111827',\n        backgroundColor: '#ffffff'\n      }\n    };\n\n    const themeConfig = themes[this.theme] || themes.basic;\n    \n    // Apply theme defaults if not explicitly set\n    if (!this.trackColor) {\n      this.trackColor = themeConfig.trackColor;\n    }\n    if (!this.textColor && themeConfig.textColor) {\n      this.textColor = themeConfig.textColor;\n    }\n    if (themeConfig.shadow && this.shadow === false) {\n      this.shadow = themeConfig.shadow;\n    }\n  }\n\n  applyVariant() {\n    const variants = {\n      'success': { color: '#198754', trackColor: 'rgba(25, 135, 84, 0.1)' },\n      'danger': { color: '#dc3545', trackColor: 'rgba(220, 53, 69, 0.1)' },\n      'warning': { color: '#ffc107', trackColor: 'rgba(255, 193, 7, 0.1)' },\n      'info': { color: '#0dcaf0', trackColor: 'rgba(13, 202, 240, 0.1)' },\n      'default': { color: '#0d6efd' } // Default blue color\n    };\n\n    if (variants[this.variant]) {\n      const variantColors = variants[this.variant];\n      if (!this.color) {\n        this.color = variantColors.color;\n      }\n      if (variantColors.trackColor && this.trackColor === this.applyTheme.trackColor) {\n        this.trackColor = variantColors.trackColor;\n      }\n    }\n    \n    // Fallback if no color is set\n    if (!this.color) {\n      this.color = '#0d6efd';\n    }\n  }\n\n  getTemplate() {\n    const sizeClass = this.sizePreset ? `circular-progress-${this.sizePreset}` : '';\n    const variantClass = this.variant !== 'default' ? `circular-progress-${this.variant}` : '';\n    const themeClass = this.theme !== 'basic' ? `circular-progress-theme-${this.theme}` : '';\n    const clickableClass = this.clickable ? 'circular-progress-clickable' : '';\n    const shadowClass = this.shadow ? 'circular-progress-shadow' : '';\n    \n    const textColorStyle = this.textColor ? `color: ${this.textColor};` : '';\n\n    return `\n      <div class=\"circular-progress-container ${sizeClass} ${variantClass} ${themeClass} ${clickableClass} ${shadowClass}\"\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=\"${textColorStyle}\">\n          <div class=\"circular-progress-content\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  async onAfterRender() {\n    this.svg = this.element.querySelector('.circular-progress-svg');\n    this.centerElement = this.element.querySelector('.circular-progress-content');\n    this.containerElement = this.element.querySelector('.circular-progress-container');\n\n    // Render the progress circle\n    this.renderProgress();\n\n    // Render center content\n    this.renderCenterContent();\n\n    // Setup interactions\n    if (this.clickable) {\n      this.setupClickHandler();\n    }\n\n    // Setup tooltip\n    if (this.tooltip && this.clickable) {\n      this.setupTooltip();\n    }\n  }\n\n  renderProgress() {\n    if (!this.svg) return;\n\n    // Clear previous content\n    this.svg.innerHTML = '';\n\n    const center = this.size / 2;\n    const radius = (this.size - this.strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    // Create gradient definition if needed\n    if (this.gradientColors && this.gradientColors.length > 1) {\n      this.createGradient();\n    }\n\n    // Determine if we're using segments or single progress\n    if (this.segments && Array.isArray(this.segments) && this.segments.length > 0) {\n      this.renderSegments(center, radius, circumference);\n    } else {\n      this.renderSingleProgress(center, radius, circumference);\n    }\n  }\n\n  renderSingleProgress(center, radius, circumference) {\n    // Calculate arc length\n    const arcLength = this.gap > 0 ? (360 - this.gap) : 360;\n    const arcCircumference = (arcLength / 360) * circumference;\n\n    // Create track (background circle/arc)\n    const track = this.createCircle(center, radius, {\n      stroke: this.trackColor,\n      strokeWidth: this.strokeWidth,\n      fill: 'none',\n      strokeLinecap: this.rounded ? 'round' : 'butt',\n      strokeDasharray: this.gap > 0 ? `${arcCircumference} ${circumference}` : 'none',\n      transform: `rotate(${this.rotation} ${center} ${center})`\n    });\n    this.svg.appendChild(track);\n\n    // Create progress circle\n    const percentage = this.getPercentage();\n    const progressLength = (percentage / 100) * arcCircumference;\n    const dashOffset = arcCircumference - progressLength;\n\n    const strokeColor = this.gradientColors ? `url(#${this.gradientId})` : this.color;\n\n    const progress = this.createCircle(center, radius, {\n      stroke: strokeColor,\n      strokeWidth: this.strokeWidth,\n      fill: 'none',\n      strokeLinecap: this.rounded ? 'round' : 'butt',\n      strokeDasharray: `${arcCircumference} ${circumference}`,\n      strokeDashoffset: this.animate ? arcCircumference : dashOffset,\n      transform: `rotate(${this.rotation} ${center} ${center})`,\n      class: 'circular-progress-bar'\n    });\n\n    this.svg.appendChild(progress);\n\n    // Apply animation\n    if (this.animate) {\n      this.animateProgress(progress, dashOffset);\n    }\n  }\n\n  renderSegments(center, radius, circumference) {\n    // Calculate arc length\n    const arcLength = this.gap > 0 ? (360 - this.gap) : 360;\n    const arcCircumference = (arcLength / 360) * circumference;\n\n    // Create track\n    const track = this.createCircle(center, radius, {\n      stroke: this.trackColor,\n      strokeWidth: this.strokeWidth,\n      fill: 'none',\n      strokeLinecap: this.rounded ? 'round' : 'butt',\n      strokeDasharray: this.gap > 0 ? `${arcCircumference} ${circumference}` : 'none',\n      transform: `rotate(${this.rotation} ${center} ${center})`\n    });\n    this.svg.appendChild(track);\n\n    // Validate segments total\n    const total = this.segments.reduce((sum, seg) => sum + (seg.value || 0), 0);\n    if (total > this.max) {\n      console.warn('CircularProgress: Segment total exceeds max value. Clamping to max.');\n    }\n\n    // Render each segment\n    let currentOffset = 0;\n\n    this.segments.forEach((segment, index) => {\n      const segmentPercentage = ((segment.value || 0) / (this.max - this.min)) * 100;\n      const segmentLength = (segmentPercentage / 100) * arcCircumference;\n\n      // Gap between segments (in circumference units)\n      const gapLength = (this.segmentGap / 360) * circumference;\n\n      if (segmentLength > 0) {\n        const segmentCircle = this.createCircle(center, radius, {\n          stroke: segment.color || this.color,\n          strokeWidth: this.strokeWidth,\n          fill: 'none',\n          strokeLinecap: this.rounded ? 'round' : 'butt',\n          strokeDasharray: `${segmentLength} ${circumference}`,\n          strokeDashoffset: this.animate ? arcCircumference : -(currentOffset),\n          transform: `rotate(${this.rotation} ${center} ${center})`,\n          class: `circular-progress-segment circular-progress-segment-${index}`,\n          'data-segment-index': index\n        });\n\n        this.svg.appendChild(segmentCircle);\n\n        // Apply animation\n        if (this.animate) {\n          this.animateProgress(segmentCircle, -(currentOffset), index * 100);\n        }\n\n        // Update offset for next segment\n        currentOffset += segmentLength + gapLength;\n      }\n    });\n  }\n\n  createCircle(cx, cy, attributes = {}) {\n    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n    circle.setAttribute('cx', cx);\n    circle.setAttribute('cy', cx); // Use cx for cy since we pass center for both\n    circle.setAttribute('r', cy); // cy parameter is actually the radius\n\n    Object.entries(attributes).forEach(([key, value]) => {\n      if (key === 'strokeWidth') {\n        circle.setAttribute('stroke-width', value);\n      } else if (key === 'strokeLinecap') {\n        circle.setAttribute('stroke-linecap', value);\n      } else if (key === 'strokeDasharray') {\n        circle.setAttribute('stroke-dasharray', value);\n      } else if (key === 'strokeDashoffset') {\n        circle.setAttribute('stroke-dashoffset', value);\n      } else {\n        circle.setAttribute(key, value);\n      }\n    });\n\n    return circle;\n  }\n\n  createGradient() {\n    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');\n    const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');\n    gradient.setAttribute('id', this.gradientId);\n    gradient.setAttribute('x1', '0%');\n    gradient.setAttribute('y1', '0%');\n    gradient.setAttribute('x2', '100%');\n    gradient.setAttribute('y2', '100%');\n\n    this.gradientColors.forEach((color, index) => {\n      const stop = document.createElementNS('http://www.w3.org/2000/svg', 'stop');\n      const offset = (index / (this.gradientColors.length - 1)) * 100;\n      stop.setAttribute('offset', `${offset}%`);\n      stop.setAttribute('stop-color', color);\n      gradient.appendChild(stop);\n    });\n\n    defs.appendChild(gradient);\n    this.svg.appendChild(defs);\n  }\n\n  animateProgress(circle, targetOffset, delay = 0) {\n    setTimeout(() => {\n      circle.style.transition = `stroke-dashoffset ${this.animationDuration}ms ${this.animationEasing}`;\n      circle.style.strokeDashoffset = targetOffset;\n    }, delay);\n  }\n\n  renderCenterContent() {\n    if (!this.centerElement) return;\n\n    // Priority: labelHtml > icon > value/label\n    if (this.labelHtml) {\n      this.centerElement.innerHTML = this.labelHtml;\n    } else if (this.icon) {\n      this.centerElement.innerHTML = `<i class=\"${this.icon}\"></i>`;\n    } else if (this.showValue) {\n      const formattedValue = this.getFormattedValue();\n      let html = `<div class=\"circular-progress-value\">${formattedValue}</div>`;\n      \n      if (this.label) {\n        html += `<div class=\"circular-progress-label\">${this.label}</div>`;\n      }\n\n      this.centerElement.innerHTML = html;\n    }\n  }\n\n  getFormattedValue() {\n    const value = this.value;\n    const min = this.min;\n    const max = this.max;\n\n    // Custom formatter function takes precedence\n    if (this.valueFormatter && typeof this.valueFormatter === 'function') {\n      return this.valueFormatter(value, min, max);\n    }\n\n    // Built-in formats\n    switch (this.valueFormat) {\n      case 'percentage':\n        return `${Math.round(this.getPercentage())}%`;\n      \n      case 'fraction':\n        return `${value}/${max}`;\n      \n      case 'value':\n        return value.toString();\n      \n      default:\n        // Try DataFormatter\n        if (this.dataFormatter) {\n          try {\n            return this.dataFormatter.pipe(value, this.valueFormat);\n          } catch (error) {\n            console.warn('CircularProgress: DataFormatter error, falling back to percentage', error);\n            return `${Math.round(this.getPercentage())}%`;\n          }\n        }\n        return `${Math.round(this.getPercentage())}%`;\n    }\n  }\n\n  getPercentage() {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((this.value - this.min) / range) * 100;\n  }\n\n  setupClickHandler() {\n    if (!this.containerElement) return;\n\n    this.containerElement.style.cursor = 'pointer';\n    \n    this.containerElement.addEventListener('click', (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const percentage = this.getPercentage();\n      \n      this.emit('progress:clicked', {\n        value: this.value,\n        percentage,\n        min: this.min,\n        max: this.max\n      });\n\n      // Toggle popover if tooltip is configured\n      if (this.tooltip) {\n        this.togglePopover();\n      }\n    });\n  }\n\n  setupTooltip() {\n    // Bootstrap popover will be initialized on first click\n    // We'll create the popover content dynamically\n  }\n\n  togglePopover() {\n    if (!this.containerElement || typeof window.bootstrap === 'undefined') {\n      console.warn('CircularProgress: Bootstrap is required for tooltip support');\n      return;\n    }\n\n    // Get or create popover instance\n    if (!this.popover) {\n      const content = this.getTooltipContent();\n      const title = typeof this.tooltip === 'object' && this.tooltip.title ? this.tooltip.title : undefined;\n\n      // Build config object, omitting title if undefined\n      const popoverConfig = {\n        content: content,\n        html: true,\n        placement: this.tooltipPlacement,\n        trigger: 'manual',\n        container: 'body'\n      };\n      \n      // Only add title if it exists\n      if (title) {\n        popoverConfig.title = title;\n      }\n\n      this.popover = new window.bootstrap.Popover(this.containerElement, popoverConfig);\n    }\n\n    // Toggle visibility\n    const popoverElement = window.bootstrap.Popover.getInstance(this.containerElement);\n    if (popoverElement && this.containerElement.getAttribute('aria-describedby')) {\n      this.popover.hide();\n    } else {\n      // Update content before showing\n      this.popover.setContent({\n        '.popover-body': this.getTooltipContent()\n      });\n      this.popover.show();\n    }\n  }\n\n  getTooltipContent() {\n    if (typeof this.tooltip === 'function') {\n      return this.tooltip(this.value, {\n        min: this.min,\n        max: this.max,\n        percentage: this.getPercentage()\n      });\n    }\n\n    if (typeof this.tooltip === 'object') {\n      return this.tooltip.html || this.tooltip.content || '';\n    }\n\n    return this.tooltip || '';\n  }\n\n  // Public API\n\n  setValue(value, animate = true) {\n    const oldValue = this.value;\n    this.value = Math.max(this.min, Math.min(this.max, value));\n    \n    // Update center content\n    this.renderCenterContent();\n    \n    // Update progress without full re-render\n    if (this.svg && !this.segments) {\n      const progressBar = this.svg.querySelector('.circular-progress-bar');\n      if (progressBar) {\n        const radius = (this.size / 2) - (this.strokeWidth / 2);\n        const circumference = 2 * Math.PI * radius;\n        const arcLength = this.gap > 0 ? (360 - this.gap) : 360;\n        const arcCircumference = (arcLength / 360) * circumference;\n        const percentage = this.getPercentage();\n        const progressLength = (percentage / 100) * arcCircumference;\n        const dashOffset = arcCircumference - progressLength;\n        \n        if (animate) {\n          // Animate from current offset to new offset\n          progressBar.style.transition = `stroke-dashoffset ${this.animationDuration}ms ${this.animationEasing}`;\n          progressBar.style.strokeDashoffset = dashOffset;\n        } else {\n          // Update immediately without animation\n          progressBar.style.transition = 'none';\n          progressBar.style.strokeDashoffset = dashOffset;\n        }\n      }\n    } else {\n      // For segments or if no existing progress bar, do full re-render\n      const oldAnimate = this.animate;\n      this.animate = animate;\n      this.renderProgress();\n      this.animate = oldAnimate;\n    }\n  }\n\n  setRange(min, max) {\n    this.min = min;\n    this.max = max;\n    this.renderProgress();\n    this.renderCenterContent();\n  }\n\n  increment(amount = 1) {\n    this.setValue(this.value + amount);\n  }\n\n  decrement(amount = 1) {\n    this.setValue(this.value - amount);\n  }\n\n  setColor(color) {\n    this.color = color;\n    this.gradientColors = null; // Clear gradient\n    \n    // Update color without full re-render\n    if (this.svg && !this.segments) {\n      const progressBar = this.svg.querySelector('.circular-progress-bar');\n      if (progressBar) {\n        progressBar.setAttribute('stroke', color);\n      }\n    } else {\n      // For segments, need to re-render\n      this.renderProgress();\n    }\n  }\n\n  setGradient(colors) {\n    if (Array.isArray(colors) && colors.length > 1) {\n      this.gradientColors = colors;\n      this.gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;\n      this.renderProgress();\n    }\n  }\n\n  setSize(size) {\n    // Remove old size class if it exists\n    if (this.containerElement && this.sizePreset) {\n      this.containerElement.classList.remove(`circular-progress-${this.sizePreset}`);\n    }\n    \n    // Update size preset if the new size is a preset string\n    this.sizePreset = (typeof size === 'string' && this.SIZE_PRESETS[size]) ? size : null;\n    this.size = this.resolveSize(size);\n    this.strokeWidth = this.getAutoStrokeWidth(size);\n    \n    // Add new size class if it's a preset\n    if (this.containerElement) {\n      this.containerElement.style.width = `${this.size}px`;\n      this.containerElement.style.height = `${this.size}px`;\n      \n      if (this.sizePreset) {\n        this.containerElement.classList.add(`circular-progress-${this.sizePreset}`);\n      }\n    }\n    \n    if (this.svg) {\n      this.svg.setAttribute('width', this.size);\n      this.svg.setAttribute('height', this.size);\n      this.svg.setAttribute('viewBox', `0 0 ${this.size} ${this.size}`);\n    }\n    \n    this.renderProgress();\n  }\n\n  animateTo(targetValue, duration = 1000) {\n    const startValue = this.value;\n    const diff = targetValue - startValue;\n    const startTime = performance.now();\n\n    const animate = (currentTime) => {\n      const elapsed = currentTime - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // Ease-out function\n      const easeProgress = 1 - Math.pow(1 - progress, 3);\n      \n      const newValue = startValue + (diff * easeProgress);\n      this.setValue(newValue, false);\n\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      } else {\n        this.setValue(targetValue, false);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }\n\n  pulse() {\n    if (!this.containerElement) return;\n\n    this.containerElement.style.animation = 'none';\n    setTimeout(() => {\n      this.containerElement.style.animation = 'circular-progress-pulse 0.5s ease-out';\n    }, 10);\n\n    setTimeout(() => {\n      this.containerElement.style.animation = '';\n    }, 500);\n  }\n\n  complete() {\n    this.variant = 'success';\n    this.applyVariant();\n    this.setValue(this.max);\n    this.pulse();\n  }\n\n  reset() {\n    this.setValue(this.min);\n  }\n\n  hide() {\n    if (this.element) {\n      this.element.style.display = 'none';\n    }\n  }\n\n  show() {\n    if (this.element) {\n      this.element.style.display = '';\n    }\n  }\n\n  getValue() {\n    return this.value;\n  }\n\n  getPercentageValue() {\n    return this.getPercentage();\n  }\n\n  async onBeforeDestroy() {\n    // Clean up popover\n    if (this.popover) {\n      this.popover.dispose();\n      this.popover = null;\n    }\n\n    await super.onBeforeDestroy();\n  }\n}\n"],"names":["CircularProgress","View","constructor","options","super","className","this","SIZE_PRESETS","xs","sm","md","lg","xl","STROKE_PRESETS","value","min","max","sizePreset","size","resolveSize","strokeWidth","getAutoStrokeWidth","theme","variant","color","trackColor","textColor","gradientColors","applyTheme","applyVariant","rotation","gap","showValue","valueFormat","valueFormatter","label","labelHtml","icon","animate","animationDuration","animationEasing","rounded","shadow","clickable","tooltip","tooltipPlacement","segments","segmentGap","dataFormatter","svg","centerElement","popover","gradientId","Math","random","toString","substr","actualSize","themes","basic","backgroundColor","shadowed","dark","light","themeConfig","variants","success","danger","warning","info","default","variantColors","getTemplate","sizeClass","variantClass","themeClass","clickableClass","shadowClass","textColorStyle","onAfterRender","element","querySelector","containerElement","renderProgress","renderCenterContent","setupClickHandler","setupTooltip","innerHTML","center","radius","circumference","PI","length","createGradient","Array","isArray","renderSegments","renderSingleProgress","arcCircumference","track","createCircle","stroke","fill","strokeLinecap","strokeDasharray","transform","appendChild","dashOffset","getPercentage","strokeColor","progress","strokeDashoffset","class","animateProgress","reduce","sum","seg","console","warn","currentOffset","forEach","segment","index","segmentLength","gapLength","segmentCircle","cx","cy","attributes","circle","document","createElementNS","setAttribute","Object","entries","key","defs","gradient","stop","offset","targetOffset","delay","setTimeout","style","transition","html","getFormattedValue","round","pipe","error","range","cursor","addEventListener","e","preventDefault","stopPropagation","percentage","emit","togglePopover","window","bootstrap","content","getTooltipContent","title","popoverConfig","placement","trigger","container","Popover","getInstance","getAttribute","hide","setContent","show","setValue","progressBar","oldAnimate","setRange","increment","amount","decrement","setColor","setGradient","colors","setSize","classList","remove","width","height","add","animateTo","targetValue","duration","startValue","diff","startTime","performance","now","currentTime","elapsed","easeProgress","pow","newValue","requestAnimationFrame","pulse","animation","complete","reset","display","getValue","getPercentageValue","onBeforeDestroy","dispose"],"mappings":"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"}

package/dist/charts.css

@@ -1270,3 +1270,322 @@
     background: rgba(255, 255, 255, 0.9);
     color: #212529;
 }
+
+/* ==========================================================================
+   Circular Progress Component
+   ========================================================================== */
+
+/* Container */
+.circular-progress {
+    display: inline-block;
+    font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
+}
+
+.circular-progress-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s ease;
+}
+
+.circular-progress-container:hover {
+    transform: scale(1.02);
+}
+
+/* SVG */
+.circular-progress-svg {
+    display: block;
+    overflow: visible;
+    margin: 0 auto;
+}
+
+.circular-progress-bar,
+.circular-progress-segment {
+    transition: stroke-dashoffset 0.6s ease-out;
+}
+
+/* Center content overlay */
+.circular-progress-center {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    pointer-events: none;
+}
+
+.circular-progress-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+    max-width: 70%;
+}
+
+/* Value display */
+.circular-progress-value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--chart-text, #212529);
+    white-space: nowrap;
+}
+
+.circular-progress-label {
+    font-size: 0.625rem;
+    font-weight: 500;
+    line-height: 1.2;
+    color: var(--chart-text-muted, #6c757d);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    white-space: nowrap;
+}
+
+/* Icon display */
+.circular-progress-content i {
+    font-size: 1.5rem;
+    color: var(--chart-text, #212529);
+    line-height: 1;
+}
+
+/* Size variants */
+.circular-progress-container.circular-progress-xs .circular-progress-value {
+    font-size: 0.625rem;
+}
+
+.circular-progress-container.circular-progress-xs .circular-progress-label {
+    font-size: 0.4rem;
+}
+
+.circular-progress-container.circular-progress-xs .circular-progress-content i {
+    font-size: 0.75rem;
+}
+
+.circular-progress-container.circular-progress-sm .circular-progress-value {
+    font-size: 0.875rem;
+}
+
+.circular-progress-container.circular-progress-sm .circular-progress-label {
+    font-size: 0.5rem;
+}
+
+.circular-progress-container.circular-progress-sm .circular-progress-content i {
+    font-size: 1rem;
+}
+
+.circular-progress-container.circular-progress-md .circular-progress-value {
+    font-size: 1.125rem;
+}
+
+.circular-progress-container.circular-progress-md .circular-progress-label {
+    font-size: 0.5625rem;
+}
+
+.circular-progress-container.circular-progress-md .circular-progress-content i {
+    font-size: 1.25rem;
+}
+
+.circular-progress-container.circular-progress-lg .circular-progress-value {
+    font-size: 1.5rem;
+}
+
+.circular-progress-container.circular-progress-lg .circular-progress-label {
+    font-size: 0.6875rem;
+}
+
+.circular-progress-container.circular-progress-lg .circular-progress-content i {
+    font-size: 1.75rem;
+}
+
+.circular-progress-container.circular-progress-xl .circular-progress-value {
+    font-size: 2.25rem;
+}
+
+.circular-progress-container.circular-progress-xl .circular-progress-label {
+    font-size: 0.8125rem;
+}
+
+.circular-progress-container.circular-progress-xl .circular-progress-content i {
+    font-size: 2.5rem;
+}
+
+/* Variant colors */
+.circular-progress-container.circular-progress-success .circular-progress-value {
+    color: #198754;
+}
+
+.circular-progress-container.circular-progress-success .circular-progress-content i {
+    color: #198754;
+}
+
+.circular-progress-container.circular-progress-danger .circular-progress-value {
+    color: #dc3545;
+}
+
+.circular-progress-container.circular-progress-danger .circular-progress-content i {
+    color: #dc3545;
+}
+
+.circular-progress-container.circular-progress-warning .circular-progress-value {
+    color: #ffc107;
+}
+
+.circular-progress-container.circular-progress-warning .circular-progress-content i {
+    color: #ffc107;
+}
+
+.circular-progress-container.circular-progress-info .circular-progress-value {
+    color: #0dcaf0;
+}
+
+.circular-progress-container.circular-progress-info .circular-progress-content i {
+    color: #0dcaf0;
+}
+
+/* Clickable state */
+.circular-progress-clickable .circular-progress-container {
+    cursor: pointer;
+    transition:
+        transform 0.15s ease,
+        filter 0.15s ease;
+}
+
+.circular-progress-clickable .circular-progress-container:hover {
+    transform: scale(1.05);
+    filter: brightness(1.1);
+}
+
+.circular-progress-clickable .circular-progress-container:active {
+    transform: scale(0.98);
+}
+
+/* Shadow variant */
+.circular-progress-shadow .circular-progress-container {
+    filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.15));
+}
+
+/* Theme: Shadowed */
+.circular-progress-theme-shadowed .circular-progress-svg {
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.circular-progress-theme-shadowed circle[class*="progress"] {
+    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+}
+
+.circular-progress-theme-shadowed .circular-progress-svg circle:not([class]) {
+    /* Track circle - shadow effect */
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+/* Theme: Dark */
+.circular-progress-theme-dark {
+    background: #1f2937;
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+.circular-progress-theme-dark .circular-progress-value,
+.circular-progress-theme-dark .circular-progress-label {
+    color: #e5e7eb;
+}
+
+/* Theme: Light */
+.circular-progress-theme-light {
+    background: #ffffff;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.circular-progress-theme-light .circular-progress-value,
+.circular-progress-theme-light .circular-progress-label {
+    color: #111827;
+}
+
+/* Pulse animation */
+@keyframes circular-progress-pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .circular-progress-value {
+    color: var(--chart-text, #ffffff);
+}
+
+[data-theme="dark"] .circular-progress-label {
+    color: var(--chart-text-muted, #adb5bd);
+}
+
+[data-theme="dark"] .circular-progress-content i {
+    color: var(--chart-text, #ffffff);
+}
+
+[data-theme="dark"] .circular-progress-success .circular-progress-value,
+[data-theme="dark"] .circular-progress-success .circular-progress-content i {
+    color: #75b798;
+}
+
+[data-theme="dark"] .circular-progress-danger .circular-progress-value,
+[data-theme="dark"] .circular-progress-danger .circular-progress-content i {
+    color: #ea868f;
+}
+
+[data-theme="dark"] .circular-progress-warning .circular-progress-value,
+[data-theme="dark"] .circular-progress-warning .circular-progress-content i {
+    color: #ffda6a;
+}
+
+[data-theme="dark"] .circular-progress-info .circular-progress-value,
+[data-theme="dark"] .circular-progress-info .circular-progress-content i {
+    color: #6edff6;
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+    .circular-progress-bar,
+    .circular-progress-segment,
+    .circular-progress-container {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+    .circular-progress-container {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+}
+
+/* Focus styles for accessibility */
+.circular-progress-clickable .circular-progress-container:focus {
+    outline: 2px solid var(--bs-primary, #0d6efd);
+    outline-offset: 2px;
+}
+
+/* Print styles */
+@media print {
+    .circular-progress-container {
+        break-inside: avoid;
+    }
+
+    .circular-progress-clickable .circular-progress-container {
+        cursor: default;
+    }
+}