@acorex/charts 19.13.2

package/fesm2022/acorex-charts-donut-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-charts-donut-chart.mjs","sources":["../../../../libs/charts/donut-chart/src/lib/donut-chart.config.ts","../../../../libs/charts/donut-chart/src/lib/donut-chart.component.ts","../../../../libs/charts/donut-chart/src/lib/donut-chart.component.html","../../../../libs/charts/donut-chart/src/acorex-charts-donut-chart.ts"],"sourcesContent":["import { AX_GLOBAL_CONFIG } from '@acorex/core/config';\nimport { InjectionToken, inject } from '@angular/core';\nimport { set } from 'lodash-es';\nimport { AXPDonutChartOption } from './donut-chart.type';\n\nexport const AXDonutChartDefaultConfig: AXPDonutChartOption = {\n  showTooltip: true,\n  donutWidth: 35,\n  cornerRadius: 4,\n  animationDuration: 800,\n  animationEasing: 'cubic-out',\n};\n\nexport const AX_DONUT_CHART_CONFIG = new InjectionToken<AXPDonutChartOption>('AX_DONUT_CHART_CONFIG', {\n  providedIn: 'root',\n  factory: () => {\n    const global = inject(AX_GLOBAL_CONFIG);\n    set(global, 'chart.donutChart', AXDonutChartDefaultConfig);\n    return AXDonutChartDefaultConfig;\n  },\n});\n\nexport type PartialDonutChartConfig = Partial<AXPDonutChartOption>;\n\nexport function donutChartConfig(config: PartialDonutChartConfig = {}): AXPDonutChartOption {\n  const result = {\n    ...AXDonutChartDefaultConfig,\n    ...config,\n  };\n  return result;\n}\n","import { AXChartTooltipComponent, AXChartTooltipData } from '@acorex/charts/chart-tooltip';\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  OnDestroy,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { AX_DONUT_CHART_CONFIG } from './donut-chart.config';\nimport { AXPDonutChartData, AXPDonutChartOption, AXPDonutChartValue } from './donut-chart.type';\n\nexport const AXDonutChartColors = {\n  // Modern color palette suitable for data visualization\n  defaultColors: [\n    '#4361ee', // Blue\n    '#3a0ca3', // Purple\n    '#7209b7', // Violet\n    '#f72585', // Pink\n    '#4cc9f0', // Light Blue\n    '#4895ef', // Sky Blue\n    '#560bad', // Deep Purple\n    '#f15bb5', // Light Pink\n    '#00bbf9', // Cyan\n    '#00f5d4', // Teal\n  ],\n\n  // Get a color from the palette by index with wraparound\n  getColor: (index: number, customPalette?: string[]): string => {\n    const palette = customPalette || AXDonutChartColors.defaultColors;\n    return palette[index % palette.length];\n  },\n};\n\n/**\n * Donut Chart Component\n * Displays data in a circular donut chart with interactive segments\n */\n@Component({\n  selector: 'ax-donut-chart',\n  templateUrl: './donut-chart.component.html',\n  styleUrls: ['./donut-chart.component.scss'],\n  standalone: true,\n  imports: [CommonModule, AXChartTooltipComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXDonutChartComponent implements OnDestroy {\n  // Dependency Injection\n  private cdr = inject(ChangeDetectorRef);\n\n  // Inputs\n  /** Chart data input */\n  data = input<AXPDonutChartValue>([]);\n\n  /** Chart options input */\n  options = input<AXPDonutChartOption>({});\n\n  // Outputs\n  /** Emitted when a segment is clicked */\n  segmentClick = output<AXPDonutChartData>();\n\n  /** Emitted when a segment has mouse hover\n   * Can be used by external elements to highlight this segment\n   */\n  segmentHover = output<AXPDonutChartData | null>();\n\n  // Chart container reference\n  private readonly chartContainerEl = viewChild.required<ElementRef<HTMLDivElement>>('chartContainer');\n\n  // D3 reference - loaded asynchronously\n  protected d3!: typeof import('d3');\n\n  // Chart SVG reference\n  private svg!: any;\n  private pieData: any[] = [];\n\n  // State management\n  private hiddenSegments = new Set<string>();\n  private _initialized = signal(false);\n  private _rendered = signal(false);\n\n  // Tooltip state\n  private _tooltipVisible = signal(false);\n  private _tooltipPosition = signal({ x: 0, y: 0 });\n  private _tooltipData = signal<AXChartTooltipData>({\n    title: '',\n    value: 0,\n    percentage: '0%',\n    color: '',\n  });\n\n  // Public computed properties for the template\n  protected tooltipVisible = this._tooltipVisible.asReadonly();\n  protected tooltipPosition = this._tooltipPosition.asReadonly();\n  protected tooltipData = this._tooltipData.asReadonly();\n\n  // Inject configuration\n  private configToken = inject(AX_DONUT_CHART_CONFIG);\n\n  // Computed configuration options\n  protected effectiveOptions = computed(() => {\n    return {\n      ...this.configToken,\n      ...this.options(),\n    };\n  });\n\n  // Data accessor for handling different incoming data formats\n  protected chartDataArray = computed((): AXPDonutChartData[] => {\n    return this.data() || [];\n  });\n\n  // Color accessor method\n  protected getColor(index: number): string {\n    return AXDonutChartColors.getColor(index);\n  }\n\n  // Segment visibility check\n  protected isSegmentHidden(id: string): boolean {\n    return this.hiddenSegments.has(id);\n  }\n\n  constructor() {\n    // Dynamically load D3 and initialize the chart when the component is ready\n    afterNextRender(() => {\n      this._initialized.set(true);\n      this.loadD3();\n    });\n\n    // Watch for changes to redraw the chart\n    effect(() => {\n      // Access inputs to track them\n      this.data();\n      this.effectiveOptions();\n\n      // Only update if already rendered\n      if (this._rendered()) {\n        this.updateChart();\n      }\n    });\n  }\n\n  /**\n   * Highlights a specific segment by ID\n   * @param id The segment ID to highlight, or null to clear highlight\n   */\n  highlightSegment(id: string | null): void {\n    if (!this.svg) return;\n\n    // Reset all segments first\n    this.svg\n      .selectAll('path')\n      .classed('ax-donut-chart-highlighted', false)\n      .classed('ax-donut-chart-dimmed', false)\n      .attr('transform', 'scale(1)');\n\n    if (id !== null) {\n      // Highlight the target segment\n      this.svg\n        .selectAll('path')\n        .filter((d: any) => d?.data?.id === id)\n        .classed('ax-donut-chart-highlighted', true)\n        .attr('transform', 'scale(1.02)');\n\n      // Dim other segments\n      this.svg\n        .selectAll('path')\n        .filter((d: any) => d?.data?.id !== id)\n        .classed('ax-donut-chart-dimmed', true);\n    }\n\n    this.cdr.detectChanges();\n  }\n\n  /**\n   * Toggles visibility of a segment by ID\n   * @param id Segment ID to toggle\n   * @returns New visibility state (true = visible, false = hidden)\n   */\n  toggleSegment(id: string): boolean {\n    this.toggleSegmentVisibility(id);\n    return !this.isSegmentHidden(id);\n  }\n\n  ngOnDestroy(): void {\n    this.cleanupChart();\n  }\n\n  /**\n   * Loads D3.js dynamically\n   */\n  protected async loadD3(): Promise<void> {\n    try {\n      this.d3 = await import('d3');\n      // If container is ready, create chart\n      if (this._initialized() && this.chartContainerEl()) {\n        this.createChart();\n        this._rendered.set(true);\n      }\n    } catch (error) {\n      console.error('Failed to load D3.js:', error);\n    }\n  }\n\n  protected onSegmentClick(item: AXPDonutChartData): void {\n    this.toggleSegmentVisibility(item.id);\n    this.segmentClick.emit(item);\n  }\n\n  /**\n   * Creates the donut chart\n   */\n  protected createChart(): void {\n    if (!this.d3 || !this.chartContainerEl()?.nativeElement) return;\n\n    try {\n      const containerElement = this.chartContainerEl().nativeElement;\n\n      this.clearChart(containerElement);\n\n      const data = this.chartDataArray();\n\n      if (!data || data.length === 0) {\n        this.showNoDataMessage(containerElement);\n        return;\n      }\n\n      // Filter out hidden segments\n      const visibleData = data.filter((item) => !this.hiddenSegments.has(item.id));\n\n      // If all segments are hidden, show message\n      if (visibleData.length === 0) {\n        this.showAllSegmentsHiddenMessage(containerElement);\n        return;\n      }\n\n      const options = this.effectiveOptions();\n      const { width, height } = this.setupDimensions(containerElement, options);\n      this.renderDonutChart(containerElement, width, height, visibleData);\n    } catch (error) {\n      console.error('Error creating donut chart:', error);\n      this.handleChartError();\n    }\n  }\n\n  /**\n   * Updates the chart with new data\n   */\n  protected updateChart(): void {\n    this.createChart(); // Recreate the chart with updated data\n  }\n\n  /**\n   * Clears the chart container\n   */\n  private clearChart(container: HTMLElement): void {\n    this.d3.select(container).selectAll('svg').remove();\n    this._tooltipVisible.set(false);\n  }\n\n  /**\n   * Shows a message when no data is available\n   */\n  private showNoDataMessage(container: HTMLElement): void {\n    const messageContainer = this.d3\n      .select(container)\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-message')\n      .style('width', 'auto')\n      .style('text-align', 'center');\n\n    // Add an icon\n    messageContainer\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-icon')\n      .html('<i class=\"fa-light fa-chart-pie-simple fa-2x\"></i>');\n\n    // Add text message and help text\n    messageContainer.append('div').attr('class', 'ax-donut-chart-no-data-text').text('No data available');\n    messageContainer\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-help')\n      .text('Please provide data in the correct format');\n  }\n\n  /**\n   * Shows a message when all segments are hidden\n   */\n  private showAllSegmentsHiddenMessage(container: HTMLElement): void {\n    this.clearChart(container);\n\n    // Add a simple div to ensure proper positioning\n    const wrapper = this.d3\n      .select(container)\n      .append('div')\n      .style('position', 'relative')\n      .style('width', '100%')\n      .style('height', '100%');\n\n    const messageContainer = wrapper\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-message')\n      .style('position', 'absolute')\n      .style('left', '50%')\n      .style('top', '50%')\n      .style('transform', 'translate(-50%, -50%)')\n      .style('text-align', 'center')\n      .style('z-index', '10')\n      .style('background-color', 'rgba(255, 255, 255, 0.95)')\n      .style('padding', '1.5rem')\n      .style('border-radius', '0.5rem')\n      .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')\n      .style('width', '80%')\n      .style('max-width', '300px');\n\n    // Add an icon\n    messageContainer\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-icon')\n      .style('color', 'var(--ax-text-muted, #999)')\n      .style('margin-bottom', '0.75rem')\n      .html('<i class=\"fa-light fa-eye-slash fa-2x\"></i>');\n\n    // Add text message and help text\n    messageContainer\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-text')\n      .style('font-size', '1rem')\n      .style('font-weight', '600')\n      .style('color', 'var(--ax-text-color, #333)')\n      .style('margin-bottom', '0.5rem')\n      .text('All segments are hidden');\n\n    messageContainer\n      .append('div')\n      .attr('class', 'ax-donut-chart-no-data-help')\n      .style('font-size', '0.8rem')\n      .style('color', 'var(--ax-text-muted, #999)')\n      .text('Click on a segment to show data');\n  }\n\n  /**\n   * Setups chart dimensions based on container and options\n   */\n  private setupDimensions(container: HTMLElement, options: AXPDonutChartOption): { width: number; height: number } {\n    // Get container dimensions or use defaults\n    const containerWidth = container.clientWidth || 400;\n    const containerHeight = container.clientHeight || 400;\n\n    // Ensure minimum dimensions for the chart\n    const minDim = 200;\n    const width = Math.max(options?.width || containerWidth, minDim);\n    const height = Math.max(options?.height || containerHeight, minDim);\n\n    return { width, height };\n  }\n\n  /**\n   * Renders the donut chart with visible data\n   */\n  private renderDonutChart(\n    container: HTMLElement,\n    width: number,\n    height: number,\n    visibleData: AXPDonutChartData[],\n  ): void {\n    const total = visibleData.reduce((sum, item) => sum + item.value, 0);\n\n    // Create SVG container with filters\n    const svg = this.createSvgWithFilters(container, width, height);\n\n    // Create main chart group\n    this.svg = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);\n\n    // Create donut segments\n    this.createDonutSegments(width, height, visibleData, total);\n\n    // Add total in center\n    this.addCenterDisplay(total);\n  }\n\n  /**\n   * Create SVG element with filter definitions for shadows\n   */\n  private createSvgWithFilters(container: HTMLElement, width: number, height: number): any {\n    const svg = this.d3\n      .select(container)\n      .append('svg')\n      .attr('width', '100%')\n      .attr('height', '100%')\n      .attr('viewBox', `0 0 ${width} ${height}`)\n      .attr('preserveAspectRatio', 'xMidYMid meet');\n\n    // Add drop shadow filter\n    const defs = svg.append('defs');\n    const filter = defs.append('filter').attr('id', 'ax-donut-chart-segment-shadow').attr('height', '130%');\n\n    filter.append('feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 2).attr('result', 'blur');\n    filter.append('feOffset').attr('in', 'blur').attr('dx', 1).attr('dy', 1).attr('result', 'offsetBlur');\n\n    const feComponentTransfer = filter\n      .append('feComponentTransfer')\n      .attr('in', 'offsetBlur')\n      .attr('result', 'offsetBlur');\n\n    feComponentTransfer.append('feFuncA').attr('type', 'linear').attr('slope', 0.3);\n\n    const feMerge = filter.append('feMerge');\n    feMerge.append('feMergeNode').attr('in', 'offsetBlur');\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\n\n    return svg;\n  }\n\n  /**\n   * Create and render the donut segments with animations\n   */\n  private createDonutSegments(chartWidth: number, chartHeight: number, data: AXPDonutChartData[], total: number): void {\n    // Create pie layout\n    const pie = this.d3\n      .pie<AXPDonutChartData>()\n      .value((d) => d.value)\n      .sort(null)\n      .padAngle(0.02);\n\n    // Calculate the radius of the donut chart\n    const radius = (Math.min(chartWidth, chartHeight) / 2) * 0.85;\n\n    // Calculate inner radius based on donutWidth percentage\n    const donutWidthPercent = this.effectiveOptions().donutWidth / 100;\n    const innerRadius = radius * (1 - donutWidthPercent);\n\n    // Create arc generator with the configured radius and corner radius\n    const arc = this.d3\n      .arc()\n      .innerRadius(innerRadius)\n      .outerRadius(radius * 0.95)\n      .cornerRadius(this.effectiveOptions().cornerRadius);\n\n    // Create hover arc for animation\n    const hoverArc = this.d3\n      .arc()\n      .innerRadius(innerRadius)\n      .outerRadius(radius + 10)\n      .cornerRadius(this.effectiveOptions().cornerRadius);\n\n    // Get animation options\n    const animationDuration = this.effectiveOptions().animationDuration;\n    const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);\n\n    // Generate pie data\n    this.pieData = pie(data);\n\n    // Add segments with animation\n    const segments = this.svg\n      .selectAll('path')\n      .data(this.pieData)\n      .enter()\n      .append('path')\n      .attr('class', 'ax-donut-chart-segment')\n      .attr('fill', (d: any, i: number) => this.getColor(i))\n      .style('opacity', 0)\n      .style('cursor', 'pointer') // Add cursor pointer to segments\n      .on('mouseenter', (event: MouseEvent, d: any) => {\n        if (!this.effectiveOptions().showTooltip) return;\n        this.handleSegmentHover(event, d, hoverArc, arc, total);\n      })\n      .on('mouseleave', (event: MouseEvent, d: any) => {\n        this.handleSegmentLeave(event, d, arc);\n      })\n      .on('mousemove', (event: MouseEvent) => {\n        if (this._tooltipVisible()) {\n          this.updateTooltipPosition(event);\n        }\n      })\n      .on('click', (event: MouseEvent, d: any) => {\n        this.onSegmentClick(d.data);\n      });\n\n    // Animate segments\n    segments\n      .transition()\n      .duration(animationDuration)\n      .ease(animationEasing)\n      .delay((d: any, i: number) => i * 50)\n      .style('opacity', 1)\n      .attrTween('d', (d: any) => {\n        const interpolate = this.d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);\n        return (t: number) => arc(interpolate(t)) as string;\n      });\n  }\n\n  /**\n   * Gets the appropriate D3 easing function based on the option string\n   */\n  private getEasingFunction(easing?: string): any {\n    switch (easing) {\n      case 'linear':\n        return this.d3.easeLinear;\n      case 'ease':\n        return this.d3.easePolyInOut;\n      case 'ease-in':\n        return this.d3.easePolyIn;\n      case 'ease-out':\n        return this.d3.easePolyOut;\n      case 'ease-in-out':\n        return this.d3.easePolyInOut;\n      case 'cubic':\n        return this.d3.easeCubic;\n      case 'cubic-in':\n        return this.d3.easeCubicIn;\n      case 'cubic-out':\n        return this.d3.easeCubicOut;\n      case 'cubic-in-out':\n        return this.d3.easeCubicInOut;\n      default:\n        return this.d3.easeCubicOut; // Default easing\n    }\n  }\n\n  /**\n   * Handle hover effects on a segment\n   */\n  private handleSegmentHover(event: MouseEvent, d: any, hoverArc: any, normalArc: any, total: number): void {\n    const segmentData = d.data;\n    const percentage = ((segmentData.value / total) * 100).toFixed(1);\n    const segmentColor = this.d3.select(event.currentTarget as HTMLElement).attr('fill') as string;\n\n    // Update tooltip data\n    this._tooltipData.set({\n      title: segmentData.name,\n      value: segmentData.value,\n      percentage: `${percentage}%`,\n      color: segmentColor,\n    });\n\n    // Show tooltip\n    this._tooltipVisible.set(true);\n    this.updateTooltipPosition(event);\n    this.cdr.detectChanges();\n\n    // Emit segment hover event\n    this.segmentHover.emit(segmentData);\n\n    // Apply hover effect\n    this.d3\n      .select(event.currentTarget as HTMLElement)\n      .transition()\n      .duration(200)\n      .attr('d', (d) => hoverArc(d));\n  }\n\n  /**\n   * Handles mouse leave from segments\n   */\n  private handleSegmentLeave(event: MouseEvent, d: any, normalArc: any): void {\n    // Hide tooltip\n    this._tooltipVisible.set(false);\n    this.cdr.detectChanges();\n\n    // Emit null to indicate no segment is hovered\n    this.segmentHover.emit(null);\n\n    // Remove hover effect\n    this.d3\n      .select(event.currentTarget as HTMLElement)\n      .transition()\n      .duration(200)\n      .attr('d', (d) => normalArc(d));\n  }\n\n  /**\n   * Updates tooltip position\n   * Ensures the tooltip is visible by adjusting position when near edges\n   */\n  private updateTooltipPosition(event: MouseEvent): void {\n    const container = this.chartContainerEl().nativeElement.getBoundingClientRect();\n    const x = event.clientX - container.left;\n    const y = event.clientY - container.top;\n\n    // Get container dimensions to check if we're near the edge\n    const containerWidth = container.width;\n    const containerHeight = container.height;\n\n    // Tooltip dimensions approximation (can't get exact dimensions without rendering)\n    const tooltipWidth = 150; // Approximate width of tooltip\n    const tooltipHeight = 100; // Approximate height of tooltip\n\n    // Calculate position with edge detection\n    let tooltipX = x;\n    let tooltipY = y;\n\n    // Check if we're too close to the right edge\n    const rightEdgeDistance = containerWidth - x;\n    if (rightEdgeDistance < tooltipWidth + 20) {\n      // Place tooltip to the left of the cursor with no gap\n      tooltipX = x - tooltipWidth + 20; // Overlap more with cursor position\n    }\n\n    // Check if we're too close to the bottom edge\n    const bottomEdgeDistance = containerHeight - y;\n    if (bottomEdgeDistance < tooltipHeight + 10) {\n      // Move tooltip up if near bottom edge\n      tooltipY = y - tooltipHeight;\n    }\n\n    this._tooltipPosition.set({\n      x: tooltipX,\n      y: tooltipY,\n    });\n    this.cdr.detectChanges();\n  }\n\n  /**\n   * Toggles the visibility of a segment\n   */\n  private toggleSegmentVisibility(id: string): void {\n    if (this.hiddenSegments.has(id)) {\n      this.hiddenSegments.delete(id);\n    } else {\n      this.hiddenSegments.add(id);\n    }\n\n    // Hide tooltip when toggling segments\n    this._tooltipVisible.set(false);\n\n    this.updateChart();\n  }\n\n  /**\n   * Adds center display with total value\n   */\n  private addCenterDisplay(total: number): void {\n    if (!this.svg) return;\n\n    // Calculate appropriate font sizes based on chart dimensions\n    const chartContainerWidth = this.chartContainerEl().nativeElement.clientWidth;\n    const baseFontSize = Math.max(1.4, Math.min(2.4, chartContainerWidth / 200)); // Scale between 1.4rem and 2.4rem\n    const subTextFontSize = baseFontSize * 0.5;\n\n    // Create group for the total display\n    const totalDisplay = this.svg\n      .append('g')\n      .attr('class', 'ax-donut-chart-total-display')\n      .attr('text-anchor', 'middle');\n\n    // Add total value\n    totalDisplay\n      .append('text')\n      .attr('class', 'ax-donut-chart-total-value')\n      .style('font-size', `${baseFontSize}rem`)\n      .style('font-weight', '600')\n      .style('fill', 'currentColor')\n      .text(total.toLocaleString());\n\n    // Add label\n    totalDisplay\n      .append('text')\n      .attr('class', 'ax-donut-chart-total-label')\n      .attr('dy', '1.4em')\n      .style('font-size', `${subTextFontSize}rem`)\n      .style('fill', 'currentColor')\n      .style('fill-opacity', '0.8')\n      .text('Total');\n  }\n\n  /**\n   * Handles chart rendering errors\n   */\n  private handleChartError(): void {\n    const container = this.chartContainerEl()?.nativeElement;\n    if (container) {\n      this.showNoDataMessage(container);\n    }\n  }\n\n  /**\n   * Cleans up chart resources\n   */\n  private cleanupChart(): void {\n    if (this.svg) {\n      this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();\n      this.svg = null;\n      this.pieData = [];\n    }\n    this.hiddenSegments.clear();\n    this._tooltipVisible.set(false);\n  }\n}\n","<div class=\"ax-donut-chart\" #chartContainer>\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAKa,MAAA,yBAAyB,GAAwB;AAC5D,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,iBAAiB,EAAE,GAAG;AACtB,IAAA,eAAe,EAAE,WAAW;;MAGjB,qBAAqB,GAAG,IAAI,cAAc,CAAsB,uBAAuB,EAAE;AACpG,IAAA,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,MAAK;AACZ,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACvC,QAAA,GAAG,CAAC,MAAM,EAAE,kBAAkB,EAAE,yBAAyB,CAAC;AAC1D,QAAA,OAAO,yBAAyB;KACjC;AACF,CAAA;AAIe,SAAA,gBAAgB,CAAC,MAAA,GAAkC,EAAE,EAAA;AACnE,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,GAAG,yBAAyB;AAC5B,QAAA,GAAG,MAAM;KACV;AACD,IAAA,OAAO,MAAM;AACf;;ACVa,MAAA,kBAAkB,GAAG;;AAEhC,IAAA,aAAa,EAAE;AACb,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACT,QAAA,SAAS;AACV,KAAA;;AAGD,IAAA,QAAQ,EAAE,CAAC,KAAa,EAAE,aAAwB,KAAY;AAC5D,QAAA,MAAM,OAAO,GAAG,aAAa,IAAI,kBAAkB,CAAC,aAAa;QACjE,OAAO,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC;KACvC;;AAGH;;;AAGG;MASU,qBAAqB,CAAA;;AAExB,IAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;;;AAIvC,IAAA,IAAI,GAAG,KAAK,CAAqB,EAAE,CAAC;;AAGpC,IAAA,OAAO,GAAG,KAAK,CAAsB,EAAE,CAAC;;;IAIxC,YAAY,GAAG,MAAM,EAAqB;AAE1C;;AAEG;IACH,YAAY,GAAG,MAAM,EAA4B;;AAGhC,IAAA,gBAAgB,GAAG,SAAS,CAAC,QAAQ,CAA6B,gBAAgB,CAAC;;AAG1F,IAAA,EAAE;;AAGJ,IAAA,GAAG;IACH,OAAO,GAAU,EAAE;;AAGnB,IAAA,cAAc,GAAG,IAAI,GAAG,EAAU;AAClC,IAAA,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;AAC5B,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;;AAGzB,IAAA,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC;AAC/B,IAAA,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IACzC,YAAY,GAAG,MAAM,CAAqB;AAChD,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,KAAK,EAAE,EAAE;AACV,KAAA,CAAC;;AAGQ,IAAA,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE;AAClD,IAAA,eAAe,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;AACpD,IAAA,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE;;AAG9C,IAAA,WAAW,GAAG,MAAM,CAAC,qBAAqB,CAAC;;AAGzC,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;QACzC,OAAO;YACL,GAAG,IAAI,CAAC,WAAW;YACnB,GAAG,IAAI,CAAC,OAAO,EAAE;SAClB;AACH,KAAC,CAAC;;AAGQ,IAAA,cAAc,GAAG,QAAQ,CAAC,MAA0B;AAC5D,QAAA,OAAO,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE;AAC1B,KAAC,CAAC;;AAGQ,IAAA,QAAQ,CAAC,KAAa,EAAA;AAC9B,QAAA,OAAO,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC;;;AAIjC,IAAA,eAAe,CAAC,EAAU,EAAA;QAClC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;;AAGpC,IAAA,WAAA,GAAA;;QAEE,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,MAAM,EAAE;AACf,SAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;;YAEV,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,gBAAgB,EAAE;;AAGvB,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;gBACpB,IAAI,CAAC,WAAW,EAAE;;AAEtB,SAAC,CAAC;;AAGJ;;;AAGG;AACH,IAAA,gBAAgB,CAAC,EAAiB,EAAA;QAChC,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE;;AAGf,QAAA,IAAI,CAAC;aACF,SAAS,CAAC,MAAM;AAChB,aAAA,OAAO,CAAC,4BAA4B,EAAE,KAAK;AAC3C,aAAA,OAAO,CAAC,uBAAuB,EAAE,KAAK;AACtC,aAAA,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;AAEhC,QAAA,IAAI,EAAE,KAAK,IAAI,EAAE;;AAEf,YAAA,IAAI,CAAC;iBACF,SAAS,CAAC,MAAM;AAChB,iBAAA,MAAM,CAAC,CAAC,CAAM,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE;AACrC,iBAAA,OAAO,CAAC,4BAA4B,EAAE,IAAI;AAC1C,iBAAA,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;;AAGnC,YAAA,IAAI,CAAC;iBACF,SAAS,CAAC,MAAM;AAChB,iBAAA,MAAM,CAAC,CAAC,CAAM,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE;AACrC,iBAAA,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC;;AAG3C,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;AAG1B;;;;AAIG;AACH,IAAA,aAAa,CAAC,EAAU,EAAA;AACtB,QAAA,IAAI,CAAC,uBAAuB,CAAC,EAAE,CAAC;AAChC,QAAA,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;;IAGlC,WAAW,GAAA;QACT,IAAI,CAAC,YAAY,EAAE;;AAGrB;;AAEG;AACO,IAAA,MAAM,MAAM,GAAA;AACpB,QAAA,IAAI;YACF,IAAI,CAAC,EAAE,GAAG,MAAM,OAAO,IAAI,CAAC;;YAE5B,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;gBAClD,IAAI,CAAC,WAAW,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;;;QAE1B,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC;;;AAIvC,IAAA,cAAc,CAAC,IAAuB,EAAA;AAC9C,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC;AACrC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG9B;;AAEG;IACO,WAAW,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,aAAa;YAAE;AAEzD,QAAA,IAAI;YACF,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa;AAE9D,YAAA,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC;AAEjC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE;YAElC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AAC9B,gBAAA,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;gBACxC;;;YAIF,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;AAG5E,YAAA,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5B,gBAAA,IAAI,CAAC,4BAA4B,CAAC,gBAAgB,CAAC;gBACnD;;AAGF,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE;AACvC,YAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,OAAO,CAAC;YACzE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC;;QACnE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC;YACnD,IAAI,CAAC,gBAAgB,EAAE;;;AAI3B;;AAEG;IACO,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,EAAE,CAAC;;AAGrB;;AAEG;AACK,IAAA,UAAU,CAAC,SAAsB,EAAA;AACvC,QAAA,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE;AACnD,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGjC;;AAEG;AACK,IAAA,iBAAiB,CAAC,SAAsB,EAAA;AAC9C,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;aAC3B,MAAM,CAAC,SAAS;aAChB,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,gCAAgC;AAC9C,aAAA,KAAK,CAAC,OAAO,EAAE,MAAM;AACrB,aAAA,KAAK,CAAC,YAAY,EAAE,QAAQ,CAAC;;QAGhC;aACG,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,6BAA6B;aAC3C,IAAI,CAAC,oDAAoD,CAAC;;AAG7D,QAAA,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,6BAA6B,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACrG;aACG,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,6BAA6B;aAC3C,IAAI,CAAC,2CAA2C,CAAC;;AAGtD;;AAEG;AACK,IAAA,4BAA4B,CAAC,SAAsB,EAAA;AACzD,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;;AAG1B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC;aAClB,MAAM,CAAC,SAAS;aAChB,MAAM,CAAC,KAAK;AACZ,aAAA,KAAK,CAAC,UAAU,EAAE,UAAU;AAC5B,aAAA,KAAK,CAAC,OAAO,EAAE,MAAM;AACrB,aAAA,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;QAE1B,MAAM,gBAAgB,GAAG;aACtB,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,gCAAgC;AAC9C,aAAA,KAAK,CAAC,UAAU,EAAE,UAAU;AAC5B,aAAA,KAAK,CAAC,MAAM,EAAE,KAAK;AACnB,aAAA,KAAK,CAAC,KAAK,EAAE,KAAK;AAClB,aAAA,KAAK,CAAC,WAAW,EAAE,uBAAuB;AAC1C,aAAA,KAAK,CAAC,YAAY,EAAE,QAAQ;AAC5B,aAAA,KAAK,CAAC,SAAS,EAAE,IAAI;AACrB,aAAA,KAAK,CAAC,kBAAkB,EAAE,2BAA2B;AACrD,aAAA,KAAK,CAAC,SAAS,EAAE,QAAQ;AACzB,aAAA,KAAK,CAAC,eAAe,EAAE,QAAQ;AAC/B,aAAA,KAAK,CAAC,YAAY,EAAE,gCAAgC;AACpD,aAAA,KAAK,CAAC,OAAO,EAAE,KAAK;AACpB,aAAA,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC;;QAG9B;aACG,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,6BAA6B;AAC3C,aAAA,KAAK,CAAC,OAAO,EAAE,4BAA4B;AAC3C,aAAA,KAAK,CAAC,eAAe,EAAE,SAAS;aAChC,IAAI,CAAC,6CAA6C,CAAC;;QAGtD;aACG,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,6BAA6B;AAC3C,aAAA,KAAK,CAAC,WAAW,EAAE,MAAM;AACzB,aAAA,KAAK,CAAC,aAAa,EAAE,KAAK;AAC1B,aAAA,KAAK,CAAC,OAAO,EAAE,4BAA4B;AAC3C,aAAA,KAAK,CAAC,eAAe,EAAE,QAAQ;aAC/B,IAAI,CAAC,yBAAyB,CAAC;QAElC;aACG,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,6BAA6B;AAC3C,aAAA,KAAK,CAAC,WAAW,EAAE,QAAQ;AAC3B,aAAA,KAAK,CAAC,OAAO,EAAE,4BAA4B;aAC3C,IAAI,CAAC,iCAAiC,CAAC;;AAG5C;;AAEG;IACK,eAAe,CAAC,SAAsB,EAAE,OAA4B,EAAA;;AAE1E,QAAA,MAAM,cAAc,GAAG,SAAS,CAAC,WAAW,IAAI,GAAG;AACnD,QAAA,MAAM,eAAe,GAAG,SAAS,CAAC,YAAY,IAAI,GAAG;;QAGrD,MAAM,MAAM,GAAG,GAAG;AAClB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,CAAC;AAChE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,CAAC;AAEnE,QAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;;AAG1B;;AAEG;AACK,IAAA,gBAAgB,CACtB,SAAsB,EACtB,KAAa,EACb,MAAc,EACd,WAAgC,EAAA;QAEhC,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;;AAGpE,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC;;QAG/D,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAA,UAAA,EAAa,KAAK,GAAG,CAAC,CAAA,EAAA,EAAK,MAAM,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC;;QAGtF,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC;;AAG3D,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;;AAG9B;;AAEG;AACK,IAAA,oBAAoB,CAAC,SAAsB,EAAE,KAAa,EAAE,MAAc,EAAA;AAChF,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC;aACd,MAAM,CAAC,SAAS;aAChB,MAAM,CAAC,KAAK;AACZ,aAAA,IAAI,CAAC,OAAO,EAAE,MAAM;AACpB,aAAA,IAAI,CAAC,QAAQ,EAAE,MAAM;aACrB,IAAI,CAAC,SAAS,EAAE,CAAA,IAAA,EAAO,KAAK,CAAI,CAAA,EAAA,MAAM,EAAE;AACxC,aAAA,IAAI,CAAC,qBAAqB,EAAE,eAAe,CAAC;;QAG/C,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,+BAA+B,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;QAEvG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;AACxG,QAAA,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC;QAErG,MAAM,mBAAmB,GAAG;aACzB,MAAM,CAAC,qBAAqB;AAC5B,aAAA,IAAI,CAAC,IAAI,EAAE,YAAY;AACvB,aAAA,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC;AAE/B,QAAA,mBAAmB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC;QAE/E,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;AACxC,QAAA,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AACtD,QAAA,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC;AAEzD,QAAA,OAAO,GAAG;;AAGZ;;AAEG;AACK,IAAA,mBAAmB,CAAC,UAAkB,EAAE,WAAmB,EAAE,IAAyB,EAAE,KAAa,EAAA;;AAE3G,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC;AACd,aAAA,GAAG;aACH,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK;aACpB,IAAI,CAAC,IAAI;aACT,QAAQ,CAAC,IAAI,CAAC;;AAGjB,QAAA,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,IAAI;;QAG7D,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,UAAU,GAAG,GAAG;QAClE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,iBAAiB,CAAC;;AAGpD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC;AACd,aAAA,GAAG;aACH,WAAW,CAAC,WAAW;AACvB,aAAA,WAAW,CAAC,MAAM,GAAG,IAAI;aACzB,YAAY,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,YAAY,CAAC;;AAGrD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC;AACnB,aAAA,GAAG;aACH,WAAW,CAAC,WAAW;AACvB,aAAA,WAAW,CAAC,MAAM,GAAG,EAAE;aACvB,YAAY,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,YAAY,CAAC;;QAGrD,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,iBAAiB;AACnE,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,eAAe,CAAC;;AAGvF,QAAA,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC;;AAGxB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC;aACnB,SAAS,CAAC,MAAM;AAChB,aAAA,IAAI,CAAC,IAAI,CAAC,OAAO;AACjB,aAAA,KAAK;aACL,MAAM,CAAC,MAAM;AACb,aAAA,IAAI,CAAC,OAAO,EAAE,wBAAwB;AACtC,aAAA,IAAI,CAAC,MAAM,EAAE,CAAC,CAAM,EAAE,CAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;AACpD,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC;AAClB,aAAA,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC;aAC1B,EAAE,CAAC,YAAY,EAAE,CAAC,KAAiB,EAAE,CAAM,KAAI;AAC9C,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW;gBAAE;AAC1C,YAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,CAAC;AACzD,SAAC;aACA,EAAE,CAAC,YAAY,EAAE,CAAC,KAAiB,EAAE,CAAM,KAAI;YAC9C,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC;AACxC,SAAC;AACA,aAAA,EAAE,CAAC,WAAW,EAAE,CAAC,KAAiB,KAAI;AACrC,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;AAC1B,gBAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;;AAErC,SAAC;aACA,EAAE,CAAC,OAAO,EAAE,CAAC,KAAiB,EAAE,CAAM,KAAI;AACzC,YAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;;QAGJ;AACG,aAAA,UAAU;aACV,QAAQ,CAAC,iBAAiB;aAC1B,IAAI,CAAC,eAAe;aACpB,KAAK,CAAC,CAAC,CAAM,EAAE,CAAS,KAAK,CAAC,GAAG,EAAE;AACnC,aAAA,KAAK,CAAC,SAAS,EAAE,CAAC;AAClB,aAAA,SAAS,CAAC,GAAG,EAAE,CAAC,CAAM,KAAI;YACzB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AAChG,YAAA,OAAO,CAAC,CAAS,KAAK,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAW;AACrD,SAAC,CAAC;;AAGN;;AAEG;AACK,IAAA,iBAAiB,CAAC,MAAe,EAAA;QACvC,QAAQ,MAAM;AACZ,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU;AAC3B,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa;AAC9B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU;AAC3B,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,WAAW;AAC5B,YAAA,KAAK,aAAa;AAChB,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa;AAC9B,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,SAAS;AAC1B,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,WAAW;AAC5B,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY;AAC7B,YAAA,KAAK,cAAc;AACjB,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,cAAc;AAC/B,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;;;AAIlC;;AAEG;IACK,kBAAkB,CAAC,KAAiB,EAAE,CAAM,EAAE,QAAa,EAAE,SAAc,EAAE,KAAa,EAAA;AAChG,QAAA,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI;AAC1B,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,IAAI,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;AACjE,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAW;;AAG9F,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;YACpB,KAAK,EAAE,WAAW,CAAC,IAAI;YACvB,KAAK,EAAE,WAAW,CAAC,KAAK;YACxB,UAAU,EAAE,CAAG,EAAA,UAAU,CAAG,CAAA,CAAA;AAC5B,YAAA,KAAK,EAAE,YAAY;AACpB,SAAA,CAAC;;AAGF,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;AACjC,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;AAGxB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGnC,QAAA,IAAI,CAAC;AACF,aAAA,MAAM,CAAC,KAAK,CAAC,aAA4B;AACzC,aAAA,UAAU;aACV,QAAQ,CAAC,GAAG;AACZ,aAAA,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC;;AAGlC;;AAEG;AACK,IAAA,kBAAkB,CAAC,KAAiB,EAAE,CAAM,EAAE,SAAc,EAAA;;AAElE,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;AAC/B,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;AAGxB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG5B,QAAA,IAAI,CAAC;AACF,aAAA,MAAM,CAAC,KAAK,CAAC,aAA4B;AACzC,aAAA,UAAU;aACV,QAAQ,CAAC,GAAG;AACZ,aAAA,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC;;AAGnC;;;AAGG;AACK,IAAA,qBAAqB,CAAC,KAAiB,EAAA;QAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC/E,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI;QACxC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG;;AAGvC,QAAA,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK;AACtC,QAAA,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM;;AAGxC,QAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,QAAA,MAAM,aAAa,GAAG,GAAG,CAAC;;QAG1B,IAAI,QAAQ,GAAG,CAAC;QAChB,IAAI,QAAQ,GAAG,CAAC;;AAGhB,QAAA,MAAM,iBAAiB,GAAG,cAAc,GAAG,CAAC;AAC5C,QAAA,IAAI,iBAAiB,GAAG,YAAY,GAAG,EAAE,EAAE;;YAEzC,QAAQ,GAAG,CAAC,GAAG,YAAY,GAAG,EAAE,CAAC;;;AAInC,QAAA,MAAM,kBAAkB,GAAG,eAAe,GAAG,CAAC;AAC9C,QAAA,IAAI,kBAAkB,GAAG,aAAa,GAAG,EAAE,EAAE;;AAE3C,YAAA,QAAQ,GAAG,CAAC,GAAG,aAAa;;AAG9B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;AACxB,YAAA,CAAC,EAAE,QAAQ;AACX,YAAA,CAAC,EAAE,QAAQ;AACZ,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;AAG1B;;AAEG;AACK,IAAA,uBAAuB,CAAC,EAAU,EAAA;QACxC,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAC/B,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;;aACzB;AACL,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;;;AAI7B,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;QAE/B,IAAI,CAAC,WAAW,EAAE;;AAGpB;;AAEG;AACK,IAAA,gBAAgB,CAAC,KAAa,EAAA;QACpC,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE;;QAGf,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa,CAAC,WAAW;QAC7E,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,mBAAmB,GAAG,GAAG,CAAC,CAAC,CAAC;AAC7E,QAAA,MAAM,eAAe,GAAG,YAAY,GAAG,GAAG;;AAG1C,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC;aACvB,MAAM,CAAC,GAAG;AACV,aAAA,IAAI,CAAC,OAAO,EAAE,8BAA8B;AAC5C,aAAA,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;;QAGhC;aACG,MAAM,CAAC,MAAM;AACb,aAAA,IAAI,CAAC,OAAO,EAAE,4BAA4B;AAC1C,aAAA,KAAK,CAAC,WAAW,EAAE,CAAG,EAAA,YAAY,KAAK;AACvC,aAAA,KAAK,CAAC,aAAa,EAAE,KAAK;AAC1B,aAAA,KAAK,CAAC,MAAM,EAAE,cAAc;AAC5B,aAAA,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;;QAG/B;aACG,MAAM,CAAC,MAAM;AACb,aAAA,IAAI,CAAC,OAAO,EAAE,4BAA4B;AAC1C,aAAA,IAAI,CAAC,IAAI,EAAE,OAAO;AAClB,aAAA,KAAK,CAAC,WAAW,EAAE,CAAG,EAAA,eAAe,KAAK;AAC1C,aAAA,KAAK,CAAC,MAAM,EAAE,cAAc;AAC5B,aAAA,KAAK,CAAC,cAAc,EAAE,KAAK;aAC3B,IAAI,CAAC,OAAO,CAAC;;AAGlB;;AAEG;IACK,gBAAgB,GAAA;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,aAAa;QACxD,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;;;AAIrC;;AAEG;IACK,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,aAAa,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE;AAChF,YAAA,IAAI,CAAC,GAAG,GAAG,IAAI;AACf,YAAA,IAAI,CAAC,OAAO,GAAG,EAAE;;AAEnB,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAC3B,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;;uGAhoBtB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,ECtDlC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,4QASA,ED0CY,MAAA,EAAA,CAAA,++CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,+BAAE,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGpC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;+BACE,gBAAgB,EAAA,UAAA,EAGd,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,uBAAuB,CAAC,EAAA,eAAA,EAC/B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4QAAA,EAAA,MAAA,EAAA,CAAA,++CAAA,CAAA,EAAA;;;AEpDjD;;AAEG;;;;"}

package/fesm2022/acorex-charts-gauge-chart.mjs

@@ -0,0 +1,548 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXGaugeChartDefaultConfig = {
+    minValue: 0,
+    maxValue: 100,
+    gaugeWidth: 22,
+    cornerRadius: 5,
+    backgroundColor: 'transparent',
+    baseColor: '#e2e8f0',
+    showValue: true,
+    valueColor: '#6366f1',
+    valueFontSize: 24,
+    labelFontSize: 16,
+    animationDuration: 750,
+    animationEasing: 'cubic-out',
+};
+const AX_GAUGE_CHART_CONFIG = new InjectionToken('AX_GAUGE_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => {
+        const global = inject(AX_GLOBAL_CONFIG);
+        set(global, 'chart.gaugeChart', AXGaugeChartDefaultConfig);
+        return AXGaugeChartDefaultConfig;
+    },
+});
+function gaugeChartConfig(config = {}) {
+    const result = {
+        ...AXGaugeChartDefaultConfig,
+        ...config,
+    };
+    return result;
+}
+
+/**
+ * Gauge Chart Component
+ * Renders a semi-circular gauge chart with animated needle and thresholds
+ */
+class AXGaugeChartComponent {
+    // Inputs
+    /** Chart value input */
+    value = input(0);
+    /** Chart options input */
+    options = input({});
+    // Chart container reference
+    chartContainerEl = viewChild.required('chartContainer');
+    // SVG element reference (created in the code)
+    svgElement = null;
+    // D3 reference - loaded asynchronously
+    d3;
+    // Signals for component state
+    _initialized = signal(false);
+    _rendered = signal(false);
+    _prevValue = signal(null);
+    // Track previous options to detect changes
+    _prevOptionsString = '';
+    // Inject configuration
+    configToken = inject(AX_GAUGE_CHART_CONFIG);
+    // Computed configuration options
+    effectiveOptions = computed(() => {
+        return {
+            ...this.configToken,
+            ...this.options(),
+        };
+    });
+    constructor() {
+        // Dynamically load D3 and initialize the chart when the component is ready
+        afterNextRender(() => {
+            this._initialized.set(true);
+            this.loadD3();
+        });
+        // Watch for changes to redraw the chart
+        effect(() => {
+            // Access inputs to track them
+            const currentValue = this.value();
+            const options = this.effectiveOptions();
+            // Update previous value
+            this._prevValue.set(currentValue);
+            // Only update if already rendered
+            if (this._rendered()) {
+                // If only the value changed, just update the value display and dial
+                const optionsString = JSON.stringify(options);
+                if (this._prevOptionsString === optionsString) {
+                    this.updateValueAndDial(currentValue);
+                }
+                else {
+                    // If options changed, recreate the whole chart
+                    this._prevOptionsString = optionsString;
+                    this.updateChart();
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.cleanupChart();
+    }
+    /**
+     * Loads D3.js dynamically
+     */
+    async loadD3() {
+        try {
+            this.d3 = await import('d3');
+            // If container is ready, create chart
+            if (this._initialized() && this.chartContainerEl()) {
+                this.createChart();
+                this._rendered.set(true);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load D3.js:', error);
+        }
+    }
+    /**
+     * Creates the gauge chart with all elements
+     */
+    createChart() {
+        // Clear container and create SVG
+        if (this.svgElement) {
+            this.svgElement.remove();
+        }
+        // Create SVG element
+        this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this.chartContainerEl().nativeElement.appendChild(this.svgElement);
+        // Get current options
+        const options = this.effectiveOptions();
+        // Store options string for comparison
+        this._prevOptionsString = JSON.stringify(options);
+        const backgroundColor = options.backgroundColor;
+        const baseColor = options.baseColor;
+        const showValue = options.showValue;
+        const valueColor = options.valueColor;
+        const valueFontSize = options.valueFontSize;
+        const labelFontSize = options.labelFontSize;
+        const minValue = options.minValue;
+        const maxValue = options.maxValue;
+        const thresholds = options.thresholds ?? [];
+        const label = options.label ?? '';
+        const gaugeWidth = options.gaugeWidth;
+        const cornerRadius = options.cornerRadius;
+        const animationDuration = options.animationDuration;
+        // Calculate responsive dimensions
+        const containerElement = this.chartContainerEl().nativeElement;
+        const containerWidth = containerElement.clientWidth;
+        const containerHeight = containerElement.clientHeight;
+        // Set dimensions based on options or container size
+        let width, height;
+        if (options.width && options.height) {
+            // Use the provided dimensions
+            width = options.width;
+            height = options.height;
+            // Apply explicit dimensions to the container
+            containerElement.style.width = `${width}px`;
+            containerElement.style.height = `${height}px`;
+        }
+        else {
+            // Use container dimensions
+            width = containerWidth;
+            height = containerHeight;
+        }
+        // Ensure minimum dimensions
+        width = Math.max(width, 100);
+        height = Math.max(height, 50);
+        // For a semi-circular gauge, width should be approximately twice the height
+        const size = Math.min(width, height * 2);
+        const margin = size * 0.1;
+        // Set up SVG with responsive viewBox
+        const svg = this.d3
+            .select(this.svgElement)
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${size} ${size / 2}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+        // Create a group for the chart with margin and move it to show only the top half
+        const chartGroup = svg.append('g').attr('transform', `translate(${size / 2}, ${size / 2 - margin})`);
+        // Define gauge parameters
+        const radius = size / 2 - margin;
+        const innerRadius = radius - gaugeWidth;
+        const outerRadius = radius;
+        // Create gradient definitions
+        this.createGradients(svg, thresholds, baseColor, valueColor);
+        // Draw the background arc
+        this.drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius, backgroundColor);
+        // Draw the threshold arcs if thresholds exist
+        if (thresholds.length > 0) {
+            this.drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius);
+        }
+        // Draw tick marks
+        this.drawTicks(chartGroup, outerRadius, minValue, maxValue);
+        // Draw the dial/needle with animation
+        this.drawDial(chartGroup, radius, this.value(), minValue, maxValue, valueColor, animationDuration);
+        // Draw the value display (after the dial so it's on top)
+        if (showValue) {
+            this.drawValueDisplay(chartGroup, this.value(), label, radius, valueColor, valueFontSize, labelFontSize);
+        }
+    }
+    /**
+     * Updates the chart when options change
+     */
+    updateChart() {
+        this.createChart();
+    }
+    /**
+     * Updates only the value display and dial position without recreating the chart
+     */
+    updateValueAndDial(value) {
+        if (!this.svgElement)
+            return;
+        const options = this.effectiveOptions();
+        const minValue = options.minValue;
+        const maxValue = options.maxValue;
+        const animationDuration = options.animationDuration;
+        const easingFunction = this.getEasingFunction(options.animationEasing);
+        const currentValue = value;
+        const svg = this.d3.select(this.svgElement);
+        // Get chart size from SVG viewBox
+        const viewBoxValues = svg.attr('viewBox')?.split(' ').map(Number) || [0, 0, 300, 150];
+        const size = viewBoxValues[2];
+        const margin = size * 0.1;
+        const radius = size / 2 - margin;
+        // Update value text
+        svg.select('.gauge-value').text(currentValue.toLocaleString());
+        // Update needle position
+        const angle = this.scaleValueToAngle(currentValue, minValue, maxValue);
+        const angleInDegrees = this.radiansToDegrees(angle - Math.PI / 2);
+        svg
+            .select('.gauge-needle')
+            .transition()
+            .duration(animationDuration)
+            .ease(easingFunction)
+            .attr('transform', `rotate(${angleInDegrees})`);
+    }
+    /**
+     * Cleans up chart resources
+     */
+    cleanupChart() {
+        if (this.svgElement) {
+            this.svgElement.remove();
+            this.svgElement = null;
+        }
+    }
+    /**
+     * Creates gradient definitions for thresholds
+     */
+    createGradients(svg, thresholds, baseColor, valueColor) {
+        const defs = svg.append('defs');
+        // Create a radial gradient for the background
+        const bgGradient = defs
+            .append('radialGradient')
+            .attr('id', 'gauge-bg-gradient')
+            .attr('cx', '50%')
+            .attr('cy', '50%')
+            .attr('r', '50%')
+            .attr('gradientUnits', 'userSpaceOnUse');
+        if (thresholds.length === 0) {
+            // Default gradient when no thresholds are provided
+            bgGradient
+                .append('stop')
+                .attr('offset', '0%')
+                .attr('stop-color', this.d3.color(valueColor)?.brighter(0.5).toString() || valueColor);
+            bgGradient.append('stop').attr('offset', '100%').attr('stop-color', valueColor);
+        }
+        else {
+            bgGradient
+                .append('stop')
+                .attr('offset', '0%')
+                .attr('stop-color', this.d3.color(baseColor)?.brighter(0.5).toString() || baseColor);
+            bgGradient.append('stop').attr('offset', '100%').attr('stop-color', baseColor);
+            // Create gradients for each threshold
+            thresholds.forEach((threshold, i) => {
+                const gradient = defs
+                    .append('linearGradient')
+                    .attr('id', `threshold-gradient-${i}`)
+                    .attr('gradientUnits', 'userSpaceOnUse')
+                    .attr('x1', '-1')
+                    .attr('y1', '0')
+                    .attr('x2', '1')
+                    .attr('y2', '0');
+                gradient
+                    .append('stop')
+                    .attr('offset', '0%')
+                    .attr('stop-color', this.d3.color(threshold.color)?.brighter(0.5).toString() || threshold.color);
+                gradient.append('stop').attr('offset', '100%').attr('stop-color', threshold.color);
+            });
+        }
+    }
+    /**
+     * Draws the background arc
+     */
+    drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius, backgroundColor) {
+        const backgroundArc = this.d3
+            .arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle(-Math.PI / 2) // Start from bottom (-90 degrees)
+            .endAngle(Math.PI / 2) // End at top (90 degrees)
+            .cornerRadius(cornerRadius);
+        chartGroup
+            .append('path')
+            .attr('d', backgroundArc({
+            innerRadius,
+            outerRadius,
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI / 2,
+        }))
+            .attr('fill', backgroundColor === 'transparent' ? 'url(#gauge-bg-gradient)' : backgroundColor)
+            .attr('filter', 'drop-shadow(0px 2px 3px rgba(0,0,0,0.1))');
+    }
+    /**
+     * Draws the threshold arcs with colors
+     */
+    drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius) {
+        const arc = this.d3
+            .arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius * 0.98)
+            .cornerRadius(cornerRadius);
+        // Sort thresholds by value in ascending order
+        const sortedThresholds = [...thresholds].sort((a, b) => a.value - b.value);
+        // Calculate all angles first using the color angle calculation
+        const angles = sortedThresholds.map((t) => this.scaleValueToColorAngle(t.value, minValue, maxValue));
+        // Start from the minimum value angle
+        let previousEndAngle = this.scaleValueToColorAngle(minValue, minValue, maxValue);
+        sortedThresholds.forEach((threshold, i) => {
+            const endAngle = angles[i];
+            chartGroup
+                .append('path')
+                .attr('d', arc({
+                innerRadius,
+                outerRadius,
+                startAngle: previousEndAngle,
+                endAngle,
+            }))
+                .attr('fill', `url(#threshold-gradient-${i})`)
+                .attr('class', 'threshold-arc')
+                .attr('data-value', threshold.value);
+            // Update the previous end angle for the next threshold
+            previousEndAngle = endAngle;
+        });
+        // Draw the last segment if the last threshold is less than the max value
+        if (previousEndAngle < Math.PI / 2) {
+            chartGroup
+                .append('path')
+                .attr('d', arc({
+                innerRadius,
+                outerRadius,
+                startAngle: previousEndAngle,
+                endAngle: Math.PI / 2,
+            }))
+                .attr('fill', 'url(#gauge-bg-gradient)')
+                .attr('class', 'threshold-arc');
+        }
+    }
+    /**
+     * Draws tick marks and labels around the gauge
+     */
+    drawTicks(chartGroup, radius, minValue, maxValue) {
+        const tickCount = 5; // Number of ticks including min and max
+        const tickLength = radius * 0.1;
+        const labelOffset = radius * 0.15;
+        // Create a group for the ticks
+        const tickGroup = chartGroup.append('g').attr('class', 'ticks');
+        // Generate tick values
+        const tickValues = [];
+        const step = (maxValue - minValue) / (tickCount - 1);
+        for (let i = 0; i < tickCount; i++) {
+            tickValues.push(minValue + i * step);
+        }
+        // Create ticks and labels
+        tickValues.forEach((tick) => {
+            // Calculate angle for this tick
+            const angle = this.scaleValueToAngle(tick, minValue, maxValue);
+            const radians = angle - Math.PI / 2; // Adjust for starting at bottom (-90 degrees)
+            // Calculate positions
+            const x1 = Math.cos(radians) * (radius + 5);
+            const y1 = Math.sin(radians) * (radius + 5);
+            const x2 = Math.cos(radians) * (radius + tickLength);
+            const y2 = Math.sin(radians) * (radius + tickLength);
+            // Calculate label position
+            const labelX = Math.cos(radians) * (radius + labelOffset);
+            const labelY = Math.sin(radians) * (radius + labelOffset);
+            // Draw tick line
+            tickGroup
+                .append('line')
+                .attr('x1', x1)
+                .attr('y1', y1)
+                .attr('x2', x2)
+                .attr('y2', y2)
+                .attr('stroke', '#94a3b8')
+                .attr('stroke-width', 2);
+            // Add tick label
+            tickGroup
+                .append('text')
+                .attr('x', labelX)
+                .attr('y', labelY)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .attr('fill', '#64748b')
+                .attr('class', 'gauge-min-max')
+                .style('font-size', '12px')
+                .text(tick.toLocaleString());
+        });
+    }
+    /**
+     * Draws the value and label text in the center
+     */
+    drawValueDisplay(chartGroup, value, label, radius, valueColor, valueFontSize, labelFontSize) {
+        const valueGroup = chartGroup.append('g').attr('class', 'value-display');
+        // Value display - moved closer to the dial
+        valueGroup
+            .append('text')
+            .attr('x', 0)
+            .attr('y', radius * 0.3)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .attr('fill', valueColor)
+            .attr('class', 'gauge-value')
+            .style('font-size', `${valueFontSize}px`)
+            .text(value.toLocaleString());
+        // Label display (if provided), positioned closer to the value
+        if (label) {
+            valueGroup
+                .append('text')
+                .attr('x', 0)
+                .attr('y', radius * 0.45)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .attr('fill', '#64748b')
+                .attr('class', 'gauge-label')
+                .style('font-size', `${labelFontSize}px`)
+                .text(label);
+        }
+    }
+    /**
+     * Draws the dial/needle pointing to the current value with animation
+     */
+    drawDial(chartGroup, radius, value, minValue, maxValue, valueColor, animationDuration) {
+        // Clamp value to min/max range
+        const clampedValue = Math.max(minValue, Math.min(maxValue, value));
+        // Calculate angle for needle based on value
+        const angle = this.scaleValueToAngle(clampedValue, minValue, maxValue);
+        const angleInDegrees = this.radiansToDegrees(angle - Math.PI / 2);
+        // Create a group for the needle
+        const dialGroup = chartGroup.append('g').attr('class', 'dial');
+        // Draw the needle with initial position at minimum value
+        const needlePath = dialGroup
+            .append('path')
+            .attr('d', this.createNeedlePath(radius))
+            .attr('fill', valueColor)
+            .attr('class', 'gauge-needle')
+            .attr('transform', `rotate(${this.radiansToDegrees(-Math.PI)})`); // Start at -180 degrees (left)
+        // Add a center circle
+        dialGroup
+            .append('circle')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', radius * 0.08)
+            .attr('fill', valueColor)
+            .attr('stroke', '#fff')
+            .attr('stroke-width', 2);
+        // Add a smaller white center
+        dialGroup
+            .append('circle')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', radius * 0.03)
+            .attr('fill', '#fff');
+        // Get easing function
+        const easingFunction = this.getEasingFunction(this.options()?.animationEasing);
+        // Animate the needle from min to current value
+        needlePath
+            .transition()
+            .duration(animationDuration)
+            .ease(easingFunction)
+            .attr('transform', `rotate(${angleInDegrees})`);
+    }
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    getEasingFunction(easing) {
+        switch (easing) {
+            case 'linear':
+                return this.d3.easeLinear;
+            case 'ease':
+                return this.d3.easePolyInOut;
+            case 'ease-in':
+                return this.d3.easePolyIn;
+            case 'ease-out':
+                return this.d3.easePolyOut;
+            case 'ease-in-out':
+                return this.d3.easePolyInOut;
+            case 'cubic':
+                return this.d3.easeCubic;
+            case 'cubic-in':
+                return this.d3.easeCubicIn;
+            case 'cubic-out':
+                return this.d3.easeCubicOut;
+            case 'cubic-in-out':
+                return this.d3.easeCubicInOut;
+            default:
+                return this.d3.easeCubicOut; // Default easing
+        }
+    }
+    /**
+     * Creates a path string for the needle
+     */
+    createNeedlePath(radius) {
+        const needleLength = radius * 0.8;
+        const needleWidth = radius * 0.06;
+        return `M 0,${needleWidth / 2} L ${needleLength},0 L 0,${-needleWidth / 2} Z`;
+    }
+    /**
+     * Scales a value to an angle (in radians)
+     */
+    scaleValueToAngle(value, min, max) {
+        const valueRange = max - min;
+        const angleRange = Math.PI;
+        return ((value - min) / valueRange) * angleRange - Math.PI / 2;
+    }
+    /**
+     * Scales a value to an angle for color arcs (in radians)
+     */
+    scaleValueToColorAngle(value, min, max) {
+        const valueRange = max - min;
+        const angleRange = Math.PI; // 180 degrees in radians
+        return ((value - min) / valueRange) * angleRange - Math.PI / 2;
+    }
+    /**
+     * Converts radians to degrees
+     */
+    radiansToDegrees(radians) {
+        return radians * (180 / Math.PI);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", type: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}.gauge-needle{transform-origin:center;transition:transform 1s cubic-bezier(.34,1.56,.64,1)}.value-display{text-anchor:middle;dominant-baseline:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-gauge-chart', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}.gauge-needle{transform-origin:center;transition:transform 1s cubic-bezier(.34,1.56,.64,1)}.value-display{text-anchor:middle;dominant-baseline:middle}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXGaugeChartComponent, AXGaugeChartDefaultConfig, AX_GAUGE_CHART_CONFIG, gaugeChartConfig };
+//# sourceMappingURL=acorex-charts-gauge-chart.mjs.map