documentation.json

{
    "pipes": [],
    "interfaces": [
        {
            "name": "AreaChartConfig",
            "id": "interface-AreaChartConfig-74eb38f341d7da31aa12a2fb0b224ff7f2a4ce659d9c2ef67632daf8e743c75e2181fe2f5cf5507d036d6fe3a1e938261374bfff886fc89cf505a9399e908cd5",
            "file": "src/components/charts/area/area.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { TimeSeriesDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface AreaChartConfig {\r\n    showGrid?: boolean;\r\n    showLine?: boolean;\r\n    showPoints?: boolean;\r\n    curved?: boolean;\r\n    animated?: boolean;\r\n    stacked?: boolean;\r\n    colors?: string[];\r\n    fillOpacity?: number;\r\n    customTooltip?: (data: { date: Date; value: number; seriesName?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n    selector: 'app-area',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './area.html',\r\n    styleUrl: './area.css',\r\n})\r\nexport class Area implements OnInit, OnChanges {\r\n\r\n    constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: TimeSeriesDataPoint[] | Record<string, TimeSeriesDataPoint[]> = [];\r\n    @Input() width: number = 800;\r\n    @Input() height: number = 500;\r\n    @Input() config: AreaChartConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n    private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n    private innerWidth!: number;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n    private innerHeight!: number;\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n        this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'area-chart-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        const colors = this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444'];\r\n\r\n        colors.forEach((color, i) => {\r\n            const gradient = defs.append('linearGradient')\r\n                .attr('id', `area-gradient-${i}`)\r\n                .attr('x1', '0%')\r\n                .attr('y1', '0%')\r\n                .attr('x2', '0%')\r\n                .attr('y2', '100%');\r\n\r\n            gradient.append('stop')\r\n                .attr('offset', '0%')\r\n                .attr('stop-color', color)\r\n                .attr('stop-opacity', this.config.fillOpacity ?? 0.6);\r\n\r\n            gradient.append('stop')\r\n                .attr('offset', '100%')\r\n                .attr('stop-color', color)\r\n                .attr('stop-opacity', 0.1);\r\n        });\r\n\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'area-glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 2)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        if (!this.data || (Array.isArray(this.data) && this.data.length === 0)) return;\r\n\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        const isMultiSeries = !Array.isArray(this.data);\r\n        const seriesData: Record<string, TimeSeriesDataPoint[]> = isMultiSeries\r\n            ? this.data as Record<string, TimeSeriesDataPoint[]>\r\n            : { 'Series 1': this.data as TimeSeriesDataPoint[] };\r\n\r\n        const allData = Object.values(seriesData).flat();\r\n\r\n        const xScale = d3.scaleTime()\r\n            .domain(d3.extent(allData, d => d.date) as [Date, Date])\r\n            .range([0, this.innerWidth]);\r\n\r\n        const yScale = d3.scaleLinear()\r\n            .domain([0, d3.max(allData, d => d.value) || 0])\r\n            .nice()\r\n            .range([this.innerHeight, 0]);\r\n\r\n        const colorScale = d3.scaleOrdinal<string>()\r\n            .domain(Object.keys(seriesData))\r\n            .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444']);\r\n\r\n        if (this.config.showGrid !== false) {\r\n            this.addGrid(xScale, yScale);\r\n        }\r\n\r\n        Object.entries(seriesData).forEach(([seriesName, data], index) => {\r\n            this.addArea(data, xScale, yScale, colorScale(seriesName), index, seriesName);\r\n        });\r\n\r\n        this.addAxes(xScale, yScale);\r\n\r\n        // Add overlay for hover interaction\r\n        this.addHoverOverlay(seriesData, xScale, yScale, colorScale);\r\n    }\r\n\r\n    private addGrid(\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>\r\n    ): void {\r\n        const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n        gridGroup.selectAll('.grid-line-y')\r\n            .data(yScale.ticks(5))\r\n            .join('line')\r\n            .attr('class', 'grid-line-y')\r\n            .attr('x1', 0)\r\n            .attr('x2', this.innerWidth)\r\n            .attr('y1', d => yScale(d))\r\n            .attr('y2', d => yScale(d))\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('stroke-dasharray', '4,4')\r\n            .attr('opacity', 0.2);\r\n\r\n        gridGroup.selectAll('.grid-line-x')\r\n            .data(xScale.ticks(5))\r\n            .join('line')\r\n            .attr('class', 'grid-line-x')\r\n            .attr('x1', d => xScale(d))\r\n            .attr('x2', d => xScale(d))\r\n            .attr('y1', 0)\r\n            .attr('y2', this.innerHeight)\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('stroke-dasharray', '4,4')\r\n            .attr('opacity', 0.2);\r\n    }\r\n\r\n    private addAxes(\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>\r\n    ): void {\r\n\r\n        this.chartGroup.append('g')\r\n            .attr('class', 'x-axis')\r\n            .attr('transform', `translate(0,${this.innerHeight})`)\r\n            .call(d3.axisBottom(xScale).ticks(5))\r\n            .selectAll('text')\r\n            .attr('fill', 'var(--color-text)')\r\n            .attr('font-size', 'var(--font-size-sm)');\r\n\r\n        this.chartGroup.append('g')\r\n            .attr('class', 'y-axis')\r\n            .call(d3.axisLeft(yScale).ticks(5))\r\n            .selectAll('text')\r\n            .attr('fill', 'var(--color-text)')\r\n            .attr('font-size', 'var(--font-size-sm)');\r\n\r\n        this.chartGroup.selectAll('.domain')\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 2)\r\n            .attr('opacity', 0.6);\r\n\r\n        this.chartGroup.selectAll('.tick line')\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('opacity', 0.5);\r\n    }\r\n\r\n    private addArea(\r\n        data: TimeSeriesDataPoint[],\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>,\r\n        color: string,\r\n        index: number,\r\n        seriesName: string\r\n    ): void {\r\n        const areaGroup = this.chartGroup.append('g')\r\n            .attr('class', `area-group-${index}`);\r\n\r\n        // Define area generator\r\n        const areaGenerator = this.config.curved !== false\r\n            ? d3.area<TimeSeriesDataPoint>()\r\n                .x(d => xScale(d.date))\r\n                .y0(this.innerHeight)\r\n                .y1(d => yScale(d.value))\r\n                .curve(d3.curveMonotoneX)\r\n            : d3.area<TimeSeriesDataPoint>()\r\n                .x(d => xScale(d.date))\r\n                .y0(this.innerHeight)\r\n                .y1(d => yScale(d.value));\r\n\r\n        // Add area\r\n        const areaPath = areaGroup.append('path')\r\n            .datum(data)\r\n            .attr('class', 'area-path')\r\n            .attr('d', areaGenerator)\r\n            .attr('fill', `url(#area-gradient-${index})`)\r\n            .attr('opacity', 0);\r\n\r\n        if (this.config.animated !== false) {\r\n            areaPath\r\n                .transition()\r\n                .duration(1000)\r\n                .delay(index * 200)\r\n                .attr('opacity', 1);\r\n        } else {\r\n            areaPath.attr('opacity', 1);\r\n        }\r\n\r\n        // Add line on top if enabled\r\n        if (this.config.showLine !== false) {\r\n            const lineGenerator = this.config.curved !== false\r\n                ? d3.line<TimeSeriesDataPoint>()\r\n                    .x(d => xScale(d.date))\r\n                    .y(d => yScale(d.value))\r\n                    .curve(d3.curveMonotoneX)\r\n                : d3.line<TimeSeriesDataPoint>()\r\n                    .x(d => xScale(d.date))\r\n                    .y(d => yScale(d.value));\r\n\r\n            const linePath = areaGroup.append('path')\r\n                .datum(data)\r\n                .attr('class', 'area-line')\r\n                .attr('d', lineGenerator)\r\n                .attr('fill', 'none')\r\n                .attr('stroke', color)\r\n                .attr('stroke-width', 2.5)\r\n                .attr('stroke-linecap', 'round')\r\n                .attr('stroke-linejoin', 'round')\r\n                .style('filter', 'url(#area-glow)');\r\n\r\n            if (this.config.animated !== false) {\r\n                const totalLength = (linePath.node() as any)?.getTotalLength() || 0;\r\n                linePath\r\n                    .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\r\n                    .attr('stroke-dashoffset', totalLength)\r\n                    .transition()\r\n                    .duration(1000)\r\n                    .delay(index * 200)\r\n                    .attr('stroke-dashoffset', 0);\r\n            }\r\n        }\r\n\r\n        // Add points if enabled\r\n        if (this.config.showPoints) {\r\n            const points = areaGroup.selectAll('.area-point')\r\n                .data(data)\r\n                .join('circle')\r\n                .attr('class', 'area-point')\r\n                .attr('cx', d => xScale(d.date))\r\n                .attr('cy', d => yScale(d.value))\r\n                .attr('r', 0)\r\n                .attr('fill', color)\r\n                .attr('stroke', '#fff')\r\n                .attr('stroke-width', 2)\r\n                .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))')\r\n                .transition()\r\n                .duration(this.config.animated !== false ? 400 : 0)\r\n                .delay((_, i) => (this.config.animated !== false ? index * 200 + 800 + i * 20 : 0))\r\n                .attr('r', 4);\r\n\r\n            // Add hover effects\r\n            areaGroup.selectAll('.area-point')\r\n                .on('mouseenter', (event, d: any) => {\r\n                    d3.select(event.currentTarget)\r\n                        .transition()\r\n                        .duration(200)\r\n                        .attr('r', 6)\r\n                        .attr('stroke-width', 3);\r\n\r\n                    this.ngZone.run(() => {\r\n                        this.showTooltip(event, d, seriesName, color);\r\n                    });\r\n                })\r\n                .on('mouseleave', (event) => {\r\n                    d3.select(event.currentTarget)\r\n                        .transition()\r\n                        .duration(200)\r\n                        .attr('r', 4)\r\n                        .attr('stroke-width', 2);\r\n\r\n                    this.ngZone.run(() => {\r\n                        this.hideTooltip();\r\n                    });\r\n                });\r\n        }\r\n    }\r\n\r\n    private sanitizeClassName(name: string): string {\r\n        return name.replace(/[^a-zA-Z0-9-_]/g, '-');\r\n    }\r\n\r\n    private addHoverOverlay(\r\n        seriesData: Record<string, TimeSeriesDataPoint[]>,\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>,\r\n        colorScale: d3.ScaleOrdinal<string, string>\r\n    ): void {\r\n        const overlay = this.chartGroup\r\n            .append('rect')\r\n            .attr('class', 'hover-overlay')\r\n            .attr('width', this.innerWidth)\r\n            .attr('height', this.innerHeight)\r\n            .attr('fill', 'none')\r\n            .attr('pointer-events', 'all')\r\n            .style('cursor', 'crosshair');\r\n\r\n        // Create vertical line for hover\r\n        const hoverLine = this.chartGroup\r\n            .append('line')\r\n            .attr('class', 'hover-line')\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('stroke-dasharray', '4,4')\r\n            .attr('opacity', 0)\r\n            .attr('pointer-events', 'none');\r\n\r\n        // Create hover circles for each series\r\n        const hoverCircles = this.chartGroup\r\n            .append('g')\r\n            .attr('class', 'hover-circles')\r\n            .attr('pointer-events', 'none');\r\n\r\n        Object.entries(seriesData).forEach(([seriesName, data]) => {\r\n            hoverCircles\r\n                .append('circle')\r\n                .attr('class', `hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n                .attr('r', 5)\r\n                .attr('fill', colorScale(seriesName))\r\n                .attr('stroke', '#fff')\r\n                .attr('stroke-width', 2)\r\n                .attr('opacity', 0)\r\n                .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))');\r\n        });\r\n\r\n        overlay\r\n            .on('mousemove', (event) => {\r\n                const [mouseX] = d3.pointer(event);\r\n                const hoveredDate = xScale.invert(mouseX);\r\n\r\n                // Find closest data points for each series\r\n                const closestPoints: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }> = [];\r\n\r\n                Object.entries(seriesData).forEach(([seriesName, data]) => {\r\n                    const bisect = d3.bisector<TimeSeriesDataPoint, Date>(d => d.date).left;\r\n                    const index = bisect(data, hoveredDate);\r\n\r\n                    const d0 = data[index - 1];\r\n                    const d1 = data[index];\r\n\r\n                    let closest = d0;\r\n                    if (d1 && d0) {\r\n                        closest = hoveredDate.getTime() - d0.date.getTime() > d1.date.getTime() - hoveredDate.getTime() ? d1 : d0;\r\n                    } else if (d1) {\r\n                        closest = d1;\r\n                    }\r\n\r\n                    if (closest) {\r\n                        const distance = Math.abs(xScale(closest.date) - mouseX);\r\n                        closestPoints.push({ seriesName, point: closest, distance });\r\n                    }\r\n                });\r\n\r\n                if (closestPoints.length > 0) {\r\n                    // Sort by distance and take the closest one for positioning\r\n                    closestPoints.sort((a, b) => a.distance - b.distance);\r\n                    const mainPoint = closestPoints[0];\r\n\r\n                    // Show vertical line\r\n                    hoverLine\r\n                        .attr('x1', xScale(mainPoint.point.date))\r\n                        .attr('x2', xScale(mainPoint.point.date))\r\n                        .attr('y1', 0)\r\n                        .attr('y2', this.innerHeight)\r\n                        .attr('opacity', 0.6);\r\n\r\n                    // Show circles for all series\r\n                    closestPoints.forEach(({ seriesName, point }) => {\r\n                        hoverCircles\r\n                            .select(`.hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n                            .attr('cx', xScale(point.date))\r\n                            .attr('cy', yScale(point.value))\r\n                            .attr('opacity', 1);\r\n                    });\r\n\r\n                    // Show tooltip with all series data\r\n                    this.ngZone.run(() => {\r\n                        this.showMultiSeriesTooltip(event, closestPoints, colorScale);\r\n                    });\r\n                }\r\n            })\r\n            .on('mouseleave', () => {\r\n                hoverLine.attr('opacity', 0);\r\n                hoverCircles.selectAll('circle').attr('opacity', 0);\r\n                this.ngZone.run(() => {\r\n                    this.hideTooltip();\r\n                });\r\n            });\r\n    }\r\n\r\n    private showTooltip(event: MouseEvent, dataPoint: TimeSeriesDataPoint, seriesName: string, color: string): void {\r\n        if (this.config.customTooltip) {\r\n            const customData = this.config.customTooltip({ date: dataPoint.date, value: dataPoint.value, seriesName });\r\n            this.tooltipTitle = customData.title || '';\r\n            this.tooltipData = customData.items.map(item => ({\r\n                label: item.label,\r\n                value: item.value,\r\n                color: item.color\r\n            }));\r\n        } else {\r\n            this.tooltipTitle = seriesName;\r\n            this.tooltipData = [\r\n                { label: 'Date', value: dataPoint.date.toLocaleDateString() },\r\n                { label: 'Value', value: dataPoint.value.toFixed(2), color }\r\n            ];\r\n        }\r\n\r\n        this.tooltipX = event.clientX;\r\n        this.tooltipY = event.clientY;\r\n        this.tooltipVisible = true;\r\n        this.cdr.detectChanges();\r\n    }\r\n\r\n    private showMultiSeriesTooltip(\r\n        event: MouseEvent,\r\n        points: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }>,\r\n        colorScale: d3.ScaleOrdinal<string, string>\r\n    ): void {\r\n        if (this.config.customTooltip && points.length > 0) {\r\n            const customData = this.config.customTooltip({\r\n                date: points[0].point.date,\r\n                value: points[0].point.value,\r\n                seriesName: points[0].seriesName\r\n            });\r\n            this.tooltipTitle = customData.title || '';\r\n            this.tooltipData = customData.items.map(item => ({\r\n                label: item.label,\r\n                value: item.value,\r\n                color: item.color\r\n            }));\r\n        } else {\r\n            this.tooltipTitle = points[0].point.date.toLocaleDateString();\r\n            this.tooltipData = points.map(({ seriesName, point }) => ({\r\n                label: seriesName,\r\n                value: point.value.toFixed(2),\r\n                color: colorScale(seriesName)\r\n            }));\r\n        }\r\n\r\n        this.tooltipX = event.clientX;\r\n        this.tooltipY = event.clientY;\r\n        this.tooltipVisible = true;\r\n        this.cdr.detectChanges();\r\n    }\r\n\r\n    private hideTooltip(): void {\r\n        this.tooltipVisible = false;\r\n        this.cdr.detectChanges();\r\n    }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "curved",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 16
                },
                {
                    "name": "fillOpacity",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 15
                },
                {
                    "name": "showGrid",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                },
                {
                    "name": "showLine",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "showPoints",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "stacked",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 13
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "AxisConfig",
            "id": "interface-AxisConfig-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "domain",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "[number, number]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 64
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 60
                },
                {
                    "name": "showGrid",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 61
                },
                {
                    "name": "tickFormat",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 63
                },
                {
                    "name": "ticks",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 62
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "BarChartConfig",
            "id": "interface-BarChartConfig-84cd791738dbc0dc5f7be82389429ec659ece7917b7c9513f24fe516ccd02bc5cc08b4b4a510d8c51e81c4933c48b9a23632ad3917835cb65c0c832803dbdc79",
            "file": "src/components/charts/bar/bar.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { ChartDataPoint } from '../../../types/chart';\r\nimport { calculateLabelRotation, getMaxLabelWidth } from '../../../utils/chart-helpers';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface BarChartConfig {\r\n  orientation?: 'vertical' | 'horizontal';\r\n  showGrid?: boolean;\r\n  showValues?: boolean;\r\n  animated?: boolean;\r\n  barRadius?: number;\r\n  barPadding?: number;\r\n  colors?: string[];\r\n  customTooltip?: (data: { label: string; value: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-bar',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './bar.html',\r\n  styleUrl: './bar.css',\r\n})\r\nexport class Bar implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data: ChartDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: BarChartConfig = {};\r\n  @Input() autoRotateLabels: boolean = true;\r\n  @Input() labelRotationAngle?: number;\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'bar-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    // Enhanced glass gradient with more layers\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'bar-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '0%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.8)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '30%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.4)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '70%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    // Enhanced 3D shadow with multiple layers\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'bar-3d-shadow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 6);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 8)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.25);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    // Hover glow effect\r\n    const hoverGlow = defs.append('filter')\r\n      .attr('id', 'bar-hover-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    hoverGlow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 8)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = hoverGlow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const isVertical = this.config.orientation !== 'horizontal';\r\n    const barRadius = this.config.barRadius ?? 8;\r\n\r\n    const xScale = isVertical\r\n      ? d3.scaleBand()\r\n        .domain(this.data.map(d => d.label))\r\n        .range([0, this.innerWidth])\r\n        .padding(this.config.barPadding ?? 0.3)\r\n      : d3.scaleLinear()\r\n        .domain([0, d3.max(this.data, d => d.value) || 0])\r\n        .range([0, this.innerWidth]);\r\n\r\n    const yScale = isVertical\r\n      ? d3.scaleLinear()\r\n        .domain([0, d3.max(this.data, d => d.value) || 0])\r\n        .range([this.innerHeight, 0])\r\n      : d3.scaleBand()\r\n        .domain(this.data.map(d => d.label))\r\n        .range([0, this.innerHeight])\r\n        .padding(this.config.barPadding ?? 0.3);\r\n\r\n    // Modern 2026 color palette inspired by Apple design\r\n    const modernColors = this.config.colors || [\r\n      '#0071e3', // Apple Blue\r\n      '#8e44ff', // Purple\r\n      '#ff2d55', // Pink\r\n      '#34c759', // Green\r\n      '#ff9f0a', // Orange\r\n      '#5ac8fa', // Cyan\r\n      '#af52de', // Violet\r\n      '#ff3b30'  // Red\r\n    ];\r\n\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(this.data.map(d => d.label))\r\n      .range(modernColors);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(isVertical ? yScale as any : xScale as any, isVertical);\r\n    }\r\n\r\n    this.addAxes(xScale as any, yScale as any, isVertical);\r\n\r\n    this.addBars(xScale as any, yScale as any, colorScale, isVertical, barRadius);\r\n  }\r\n\r\n  private addGrid(scale: d3.ScaleLinear<number, number>, isVertical: boolean): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    if (isVertical) {\r\n      gridGroup.selectAll('.grid-line')\r\n        .data(scale.ticks(5))\r\n        .join('line')\r\n        .attr('class', 'grid-line')\r\n        .attr('x1', 0)\r\n        .attr('x2', this.innerWidth)\r\n        .attr('y1', d => scale(d))\r\n        .attr('y2', d => scale(d))\r\n        .attr('stroke', 'var(--color-border)')\r\n        .attr('stroke-width', 1)\r\n        .attr('stroke-dasharray', '4,4')\r\n        .attr('opacity', 0.2);\r\n    } else {\r\n      gridGroup.selectAll('.grid-line')\r\n        .data(scale.ticks(5))\r\n        .join('line')\r\n        .attr('class', 'grid-line')\r\n        .attr('x1', d => scale(d))\r\n        .attr('x2', d => scale(d))\r\n        .attr('y1', 0)\r\n        .attr('y2', this.innerHeight)\r\n        .attr('stroke', 'var(--color-border)')\r\n        .attr('stroke-width', 1)\r\n        .attr('stroke-dasharray', '4,4')\r\n        .attr('opacity', 0.2);\r\n    }\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    isVertical: boolean\r\n  ): void {\r\n    const xAxis = isVertical\r\n      ? d3.axisBottom(xScale as d3.ScaleBand<string>)\r\n      : d3.axisBottom(xScale as d3.ScaleLinear<number, number>).ticks(5);\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(xAxis as any)\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)')\r\n      .style('text-anchor', isVertical ? 'middle' : 'end');\r\n\r\n    const yAxis = isVertical\r\n      ? d3.axisLeft(yScale as d3.ScaleLinear<number, number>).ticks(5)\r\n      : d3.axisLeft(yScale as d3.ScaleBand<string>);\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(yAxis as any)\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('opacity', 0.5);\r\n\r\n    if (isVertical) {\r\n      const labels = this.data.map(d => String(d.label));\r\n      const fontSize = 14;\r\n\r\n      let rotationAngle = 0;\r\n      if (this.labelRotationAngle !== undefined) {\r\n        rotationAngle = this.labelRotationAngle;\r\n      } else if (this.autoRotateLabels) {\r\n        const maxWidth = getMaxLabelWidth(labels, fontSize);\r\n        rotationAngle = calculateLabelRotation(this.innerWidth, labels, maxWidth);\r\n      }\r\n\r\n      const xAxisLabels = this.chartGroup.selectAll('.x-axis .tick text');\r\n\r\n      if (rotationAngle === 0) {\r\n        xAxisLabels\r\n          .attr('transform', 'rotate(0)')\r\n          .attr('dy', '1.2em')\r\n          .attr('dx', '0em')\r\n          .style('text-anchor', 'middle');\r\n      } else if (rotationAngle === -45) {\r\n        xAxisLabels\r\n          .attr('transform', 'rotate(-45)')\r\n          .attr('dy', '0.75em')\r\n          .attr('dx', '-0.5em')\r\n          .style('text-anchor', 'end');\r\n      } else if (rotationAngle === -90) {\r\n        xAxisLabels\r\n          .attr('transform', 'rotate(-90)')\r\n          .attr('dy', '-0.5em')\r\n          .attr('dx', '-1.5em')\r\n          .style('text-anchor', 'end');\r\n      } else {\r\n        xAxisLabels\r\n          .attr('transform', `rotate(${rotationAngle})`)\r\n          .attr('dy', '0.75em')\r\n          .attr('dx', rotationAngle < 0 ? '-0.5em' : '0.5em')\r\n          .style('text-anchor', rotationAngle < 0 ? 'end' : 'start');\r\n      }\r\n    }\r\n  }\r\n\r\n  private addBars(\r\n    xScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    colorScale: d3.ScaleOrdinal<string, string>,\r\n    isVertical: boolean,\r\n    barRadius: number\r\n  ): void {\r\n    const barsGroup = this.chartGroup.append('g').attr('class', 'bars');\r\n\r\n    const bars = barsGroup.selectAll('.bar-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'bar-group');\r\n\r\n    if (isVertical) {\r\n      const xBand = xScale as d3.ScaleBand<string>;\r\n      const yLinear = yScale as d3.ScaleLinear<number, number>;\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-shadow')\r\n        .attr('x', d => (xBand(d.label) || 0) + 2)\r\n        .attr('y', d => yLinear(d.value) + 2)\r\n        .attr('width', xBand.bandwidth())\r\n        .attr('height', d => this.innerHeight - yLinear(d.value))\r\n        .attr('fill', 'rgba(0, 0, 0, 0.1)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius);\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar')\r\n        .attr('x', d => xBand(d.label) || 0)\r\n        .attr('y', this.innerHeight)\r\n        .attr('width', xBand.bandwidth())\r\n        .attr('height', 0)\r\n        .attr('fill', d => d.color || colorScale(d.label))\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .style('filter', 'url(#bar-3d-shadow)')\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('y', d => yLinear(d.value))\r\n        .attr('height', d => this.innerHeight - yLinear(d.value));\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-glass')\r\n        .attr('x', d => xBand(d.label) || 0)\r\n        .attr('y', d => yLinear(d.value))\r\n        .attr('width', xBand.bandwidth())\r\n        .attr('height', d => this.innerHeight - yLinear(d.value))\r\n        .attr('fill', 'url(#bar-glass-gradient)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .attr('pointer-events', 'none')\r\n        .attr('opacity', 0)\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('opacity', 1);\r\n\r\n    } else {\r\n      const xLinear = xScale as d3.ScaleLinear<number, number>;\r\n      const yBand = yScale as d3.ScaleBand<string>;\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-shadow')\r\n        .attr('x', 2)\r\n        .attr('y', d => (yBand(d.label) || 0) + 2)\r\n        .attr('width', d => xLinear(d.value))\r\n        .attr('height', yBand.bandwidth())\r\n        .attr('fill', 'rgba(0, 0, 0, 0.1)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius);\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar')\r\n        .attr('x', 0)\r\n        .attr('y', d => yBand(d.label) || 0)\r\n        .attr('width', 0)\r\n        .attr('height', yBand.bandwidth())\r\n        .attr('fill', d => d.color || colorScale(d.label))\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .style('filter', 'url(#bar-3d-shadow)')\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('width', d => xLinear(d.value));\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-glass')\r\n        .attr('x', 0)\r\n        .attr('y', d => yBand(d.label) || 0)\r\n        .attr('width', d => xLinear(d.value))\r\n        .attr('height', yBand.bandwidth())\r\n        .attr('fill', 'url(#bar-glass-gradient)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .attr('pointer-events', 'none')\r\n        .attr('opacity', 0)\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('opacity', 1);\r\n    }\r\n\r\n    bars.selectAll('.bar')\r\n      .style('cursor', 'pointer')\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(300)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('opacity', 0.9)\r\n          .style('filter', 'url(#bar-hover-glow) url(#bar-3d-shadow)')\r\n          .attr('transform', isVertical ? 'translateY(-5) scale(1.02)' : 'translateX(5) scale(1.02)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(300)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('opacity', 1)\r\n          .style('filter', 'url(#bar-3d-shadow)')\r\n          .attr('transform', 'translate(0,0) scale(1)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n\r\n    if (this.config.showValues) {\r\n      bars.append('text')\r\n        .attr('class', 'bar-value')\r\n        .attr('x', d => isVertical ? ((xScale as d3.ScaleBand<string>)(d.label) || 0) + (xScale as d3.ScaleBand<string>).bandwidth() / 2 : (xScale as d3.ScaleLinear<number, number>)(d.value) + 5)\r\n        .attr('y', d => isVertical ? (yScale as d3.ScaleLinear<number, number>)(d.value) - 5 : ((yScale as d3.ScaleBand<string>)(d.label) || 0) + (yScale as d3.ScaleBand<string>).bandwidth() / 2 + 5)\r\n        .attr('text-anchor', isVertical ? 'middle' : 'start')\r\n        .attr('fill', 'var(--color-text)')\r\n        .attr('font-size', 'var(--font-size-sm)')\r\n        .attr('font-weight', '600')\r\n        .style('text-shadow', '0 1px 2px rgba(255, 255, 255, 0.8)')\r\n        .attr('opacity', 0)\r\n        .text(d => d.value.toLocaleString())\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50 + 300)\r\n        .attr('opacity', 1);\r\n    }\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: ChartDataPoint, colorScale: d3.ScaleOrdinal<string, string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip({\r\n        label: dataPoint.label,\r\n        value: dataPoint.value,\r\n        color: dataPoint.color || colorScale(dataPoint.label)\r\n      });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataPoint.label;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: dataPoint.value.toLocaleString(), color: dataPoint.color || colorScale(dataPoint.label) }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "barPadding",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "barRadius",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 13
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 15
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 16
                },
                {
                    "name": "orientation",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"vertical\" | \"horizontal\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "showGrid",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "showValues",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ChartConfig",
            "id": "interface-ChartConfig-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 54
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 56
                },
                {
                    "name": "responsive",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 55
                },
                {
                    "name": "showGrid",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 52
                },
                {
                    "name": "showLegend",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 51
                },
                {
                    "name": "showTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 53
                },
                {
                    "name": "subtitle",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 50
                },
                {
                    "name": "title",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 49
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ChartDataPoint",
            "id": "interface-ChartDataPoint-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 5
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 3
                },
                {
                    "name": "metadata",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "Record<string | any>",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 6
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 4
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ChartDimensions",
            "id": "interface-ChartDimensions-1f81e409c4dc3f4247ae493a756a9c6a389758cca5da56b6553200399daa884812c1d0353abe041b386028df8c0ea0a02701ca4b3dec0ae6a2932fc9473793cf",
            "file": "src/components/base/base-chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ElementRef, inject } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../services/theme';\r\n\r\nexport interface ChartMargin {\r\n    top: number;\r\n    right: number;\r\n    bottom: number;\r\n    left: number;\r\n}\r\n\r\nexport interface ChartDimensions {\r\n    width: number;\r\n    height: number;\r\n    innerWidth: number;\r\n    innerHeight: number;\r\n}\r\n\r\nexport abstract class BaseChart {\r\n    protected themeService = inject(ThemeService);\r\n    protected svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    protected chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    protected margin: ChartMargin = {\r\n        top: 40,\r\n        right: 40,\r\n        bottom: 60,\r\n        left: 60,\r\n    };\r\n\r\n    protected dimensions: ChartDimensions = {\r\n        width: 800,\r\n        height: 500,\r\n        innerWidth: 0,\r\n        innerHeight: 0,\r\n    };\r\n\r\n    protected animationDuration = 300;\r\n\r\n    constructor(protected container: ElementRef, themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    protected initializeSVG(): void {\r\n        const containerElement = this.container.nativeElement;\r\n\r\n        d3.select(containerElement).select('svg').remove();\r\n\r\n        this.svg = d3.select(containerElement)\r\n            .append('svg')\r\n            .attr('width', this.dimensions.width)\r\n            .attr('height', this.dimensions.height)\r\n            .attr('class', 'chart-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg.append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n        this.calculateInnerDimensions();\r\n    }\r\n\r\n    protected calculateInnerDimensions(): void {\r\n        this.dimensions.innerWidth = this.dimensions.width - this.margin.left - this.margin.right;\r\n        this.dimensions.innerHeight = this.dimensions.height - this.margin.top - this.margin.bottom;\r\n    }\r\n\r\n    protected addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Enhanced Glass Gradient with multiple layers\r\n        const glassGradient = defs.append('linearGradient')\r\n            .attr('id', 'glass-gradient')\r\n            .attr('x1', '0%')\r\n            .attr('y1', '0%')\r\n            .attr('x2', '0%')\r\n            .attr('y2', '100%');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.7)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '50%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.3)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // Radial Glass Effect\r\n        const radialGlass = defs.append('radialGradient')\r\n            .attr('id', 'radial-glass')\r\n            .attr('cx', '50%')\r\n            .attr('cy', '50%')\r\n            .attr('r', '50%');\r\n\r\n        radialGlass.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.8)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        radialGlass.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.2)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // Enhanced 3D Shadow Filter\r\n        const shadow3D = defs.append('filter')\r\n            .attr('id', 'shadow-3d')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow3D.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 5);\r\n\r\n        shadow3D.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 6)\r\n            .attr('result', 'offsetblur');\r\n\r\n        shadow3D.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.25);\r\n\r\n        const feMerge = shadow3D.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Stronger 3D Shadow\r\n        const shadowStrong = defs.append('filter')\r\n            .attr('id', 'shadow-3d-strong')\r\n            .attr('x', '-100%')\r\n            .attr('y', '-100%')\r\n            .attr('width', '300%')\r\n            .attr('height', '300%');\r\n\r\n        shadowStrong.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 8);\r\n\r\n        shadowStrong.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 10)\r\n            .attr('result', 'offsetblur');\r\n\r\n        shadowStrong.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const strongMerge = shadowStrong.append('feMerge');\r\n        strongMerge.append('feMergeNode');\r\n        strongMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Glow Effect\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 4)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Strong Glow\r\n        const glowStrong = defs.append('filter')\r\n            .attr('id', 'glow-strong')\r\n            .attr('x', '-100%')\r\n            .attr('y', '-100%')\r\n            .attr('width', '300%')\r\n            .attr('height', '300%');\r\n\r\n        glowStrong.append('feGaussianBlur')\r\n            .attr('stdDeviation', 8)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowStrongMerge = glowStrong.append('feMerge');\r\n        glowStrongMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowStrongMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Inner Shadow for depth\r\n        const innerShadow = defs.append('filter')\r\n            .attr('id', 'inner-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        innerShadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 3);\r\n\r\n        innerShadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 2);\r\n\r\n        innerShadow.append('feComposite')\r\n            .attr('operator', 'out')\r\n            .attr('in', 'SourceGraphic')\r\n            .attr('result', 'inverse');\r\n\r\n        innerShadow.append('feFlood')\r\n            .attr('flood-color', 'black')\r\n            .attr('flood-opacity', 0.3)\r\n            .attr('result', 'color');\r\n\r\n        innerShadow.append('feComposite')\r\n            .attr('operator', 'in')\r\n            .attr('in', 'color')\r\n            .attr('in2', 'inverse')\r\n            .attr('result', 'shadow');\r\n\r\n        const innerMerge = innerShadow.append('feMerge');\r\n        innerMerge.append('feMergeNode').attr('in', 'shadow');\r\n        innerMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    protected getColorScale(domain: string[], colors?: string[]): d3.ScaleOrdinal<string, string> {\r\n        const modernColors = [\r\n            '#0071e3', // Apple Blue\r\n            '#8e44ff', // Purple\r\n            '#ff2d55', // Pink\r\n            '#34c759', // Green\r\n            '#ff9f0a', // Orange\r\n            '#5ac8fa', // Cyan\r\n            '#af52de', // Violet\r\n            '#ff3b30', // Red\r\n        ];\r\n\r\n        return d3.scaleOrdinal<string, string>()\r\n            .domain(domain)\r\n            .range(colors || modernColors);\r\n    }\r\n\r\n    protected createGradient(id: string, colors: string[], direction: 'vertical' | 'horizontal' = 'vertical'): string {\r\n        const defs = this.svg.select('defs');\r\n        const gradient = defs.append('linearGradient')\r\n            .attr('id', id)\r\n            .attr('x1', direction === 'horizontal' ? '0%' : '0%')\r\n            .attr('y1', direction === 'horizontal' ? '0%' : '0%')\r\n            .attr('x2', direction === 'horizontal' ? '100%' : '0%')\r\n            .attr('y2', direction === 'horizontal' ? '0%' : '100%');\r\n\r\n        colors.forEach((color, i) => {\r\n            gradient.append('stop')\r\n                .attr('offset', `${(i / (colors.length - 1)) * 100}%`)\r\n                .attr('stop-color', color);\r\n        });\r\n\r\n        return `url(#${id})`;\r\n    }\r\n\r\n    protected addGlassEffect(selection: d3.Selection<any, any, any, any>, strength: 'subtle' | 'medium' | 'strong' = 'medium'): void {\r\n        const opacityMap = { subtle: 0.5, medium: 0.7, strong: 0.85 };\r\n        selection\r\n            .style('fill', function () {\r\n                const currentFill = d3.select(this).style('fill');\r\n                return currentFill;\r\n            })\r\n            .style('fill-opacity', opacityMap[strength])\r\n            .style('filter', 'url(#shadow-3d)');\r\n    }\r\n\r\n    protected addHoverEffect(selection: d3.Selection<any, any, any, any>, scale: number = 1.05): void {\r\n        selection\r\n            .style('cursor', 'pointer')\r\n            .on('mouseenter', function () {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .ease(d3.easeCubicOut)\r\n                    .style('filter', 'url(#glow-strong) url(#shadow-3d-strong)')\r\n                    .attr('transform', function () {\r\n                        const current = d3.select(this).attr('transform') || '';\r\n                        return current + ` scale(${scale})`;\r\n                    });\r\n            })\r\n            .on('mouseleave', function () {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .ease(d3.easeCubicOut)\r\n                    .style('filter', 'url(#shadow-3d)')\r\n                    .attr('transform', function () {\r\n                        const current = d3.select(this).attr('transform') || '';\r\n                        return current.replace(` scale(${scale})`, '');\r\n                    });\r\n            });\r\n    }\r\n\r\n    protected add3DDepth(selection: d3.Selection<any, any, any, any>, depth: number = 4): void {\r\n        selection.each(function () {\r\n            const element = d3.select(this);\r\n            const color = element.attr('fill') || element.style('fill');\r\n\r\n            // Create depth layers\r\n            for (let i = depth; i > 0; i--) {\r\n                const depthLayer = element.clone(true);\r\n                depthLayer\r\n                    .attr('fill', d3.color(color)?.darker(i * 0.3).toString() || color)\r\n                    .attr('transform', `translate(0, ${i})`)\r\n                    .style('opacity', 0.2)\r\n                    .lower();\r\n            }\r\n        });\r\n    }\r\n\r\n    protected formatNumber(value: number, decimals: number = 2): string {\r\n        return value.toLocaleString(undefined, {\r\n            minimumFractionDigits: 0,\r\n            maximumFractionDigits: decimals,\r\n        });\r\n    }\r\n\r\n    protected resize(width: number, height: number): void {\r\n        this.dimensions.width = width;\r\n        this.dimensions.height = height;\r\n        this.calculateInnerDimensions();\r\n\r\n        if (this.svg) {\r\n            this.svg\r\n                .attr('width', width)\r\n                .attr('height', height);\r\n        }\r\n\r\n        this.render();\r\n    }\r\n\r\n    abstract render(): void;\r\n    abstract updateData(data: any): void;\r\n}\r\n",
            "properties": [
                {
                    "name": "height",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "innerHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 16
                },
                {
                    "name": "innerWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 15
                },
                {
                    "name": "width",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 13
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ChartEvent",
            "id": "interface-ChartEvent-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "data",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "T",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 82
                },
                {
                    "name": "originalEvent",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "MouseEvent",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 83
                },
                {
                    "name": "type",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"click\" | \"hover\" | \"mouseenter\" | \"mouseleave\"",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 81
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ChartMargin",
            "id": "interface-ChartMargin-1f81e409c4dc3f4247ae493a756a9c6a389758cca5da56b6553200399daa884812c1d0353abe041b386028df8c0ea0a02701ca4b3dec0ae6a2932fc9473793cf",
            "file": "src/components/base/base-chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ElementRef, inject } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../services/theme';\r\n\r\nexport interface ChartMargin {\r\n    top: number;\r\n    right: number;\r\n    bottom: number;\r\n    left: number;\r\n}\r\n\r\nexport interface ChartDimensions {\r\n    width: number;\r\n    height: number;\r\n    innerWidth: number;\r\n    innerHeight: number;\r\n}\r\n\r\nexport abstract class BaseChart {\r\n    protected themeService = inject(ThemeService);\r\n    protected svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    protected chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    protected margin: ChartMargin = {\r\n        top: 40,\r\n        right: 40,\r\n        bottom: 60,\r\n        left: 60,\r\n    };\r\n\r\n    protected dimensions: ChartDimensions = {\r\n        width: 800,\r\n        height: 500,\r\n        innerWidth: 0,\r\n        innerHeight: 0,\r\n    };\r\n\r\n    protected animationDuration = 300;\r\n\r\n    constructor(protected container: ElementRef, themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    protected initializeSVG(): void {\r\n        const containerElement = this.container.nativeElement;\r\n\r\n        d3.select(containerElement).select('svg').remove();\r\n\r\n        this.svg = d3.select(containerElement)\r\n            .append('svg')\r\n            .attr('width', this.dimensions.width)\r\n            .attr('height', this.dimensions.height)\r\n            .attr('class', 'chart-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg.append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n        this.calculateInnerDimensions();\r\n    }\r\n\r\n    protected calculateInnerDimensions(): void {\r\n        this.dimensions.innerWidth = this.dimensions.width - this.margin.left - this.margin.right;\r\n        this.dimensions.innerHeight = this.dimensions.height - this.margin.top - this.margin.bottom;\r\n    }\r\n\r\n    protected addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Enhanced Glass Gradient with multiple layers\r\n        const glassGradient = defs.append('linearGradient')\r\n            .attr('id', 'glass-gradient')\r\n            .attr('x1', '0%')\r\n            .attr('y1', '0%')\r\n            .attr('x2', '0%')\r\n            .attr('y2', '100%');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.7)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '50%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.3)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // Radial Glass Effect\r\n        const radialGlass = defs.append('radialGradient')\r\n            .attr('id', 'radial-glass')\r\n            .attr('cx', '50%')\r\n            .attr('cy', '50%')\r\n            .attr('r', '50%');\r\n\r\n        radialGlass.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.8)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        radialGlass.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.2)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // Enhanced 3D Shadow Filter\r\n        const shadow3D = defs.append('filter')\r\n            .attr('id', 'shadow-3d')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow3D.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 5);\r\n\r\n        shadow3D.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 6)\r\n            .attr('result', 'offsetblur');\r\n\r\n        shadow3D.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.25);\r\n\r\n        const feMerge = shadow3D.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Stronger 3D Shadow\r\n        const shadowStrong = defs.append('filter')\r\n            .attr('id', 'shadow-3d-strong')\r\n            .attr('x', '-100%')\r\n            .attr('y', '-100%')\r\n            .attr('width', '300%')\r\n            .attr('height', '300%');\r\n\r\n        shadowStrong.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 8);\r\n\r\n        shadowStrong.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 10)\r\n            .attr('result', 'offsetblur');\r\n\r\n        shadowStrong.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const strongMerge = shadowStrong.append('feMerge');\r\n        strongMerge.append('feMergeNode');\r\n        strongMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Glow Effect\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 4)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Strong Glow\r\n        const glowStrong = defs.append('filter')\r\n            .attr('id', 'glow-strong')\r\n            .attr('x', '-100%')\r\n            .attr('y', '-100%')\r\n            .attr('width', '300%')\r\n            .attr('height', '300%');\r\n\r\n        glowStrong.append('feGaussianBlur')\r\n            .attr('stdDeviation', 8)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowStrongMerge = glowStrong.append('feMerge');\r\n        glowStrongMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowStrongMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Inner Shadow for depth\r\n        const innerShadow = defs.append('filter')\r\n            .attr('id', 'inner-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        innerShadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 3);\r\n\r\n        innerShadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 2);\r\n\r\n        innerShadow.append('feComposite')\r\n            .attr('operator', 'out')\r\n            .attr('in', 'SourceGraphic')\r\n            .attr('result', 'inverse');\r\n\r\n        innerShadow.append('feFlood')\r\n            .attr('flood-color', 'black')\r\n            .attr('flood-opacity', 0.3)\r\n            .attr('result', 'color');\r\n\r\n        innerShadow.append('feComposite')\r\n            .attr('operator', 'in')\r\n            .attr('in', 'color')\r\n            .attr('in2', 'inverse')\r\n            .attr('result', 'shadow');\r\n\r\n        const innerMerge = innerShadow.append('feMerge');\r\n        innerMerge.append('feMergeNode').attr('in', 'shadow');\r\n        innerMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    protected getColorScale(domain: string[], colors?: string[]): d3.ScaleOrdinal<string, string> {\r\n        const modernColors = [\r\n            '#0071e3', // Apple Blue\r\n            '#8e44ff', // Purple\r\n            '#ff2d55', // Pink\r\n            '#34c759', // Green\r\n            '#ff9f0a', // Orange\r\n            '#5ac8fa', // Cyan\r\n            '#af52de', // Violet\r\n            '#ff3b30', // Red\r\n        ];\r\n\r\n        return d3.scaleOrdinal<string, string>()\r\n            .domain(domain)\r\n            .range(colors || modernColors);\r\n    }\r\n\r\n    protected createGradient(id: string, colors: string[], direction: 'vertical' | 'horizontal' = 'vertical'): string {\r\n        const defs = this.svg.select('defs');\r\n        const gradient = defs.append('linearGradient')\r\n            .attr('id', id)\r\n            .attr('x1', direction === 'horizontal' ? '0%' : '0%')\r\n            .attr('y1', direction === 'horizontal' ? '0%' : '0%')\r\n            .attr('x2', direction === 'horizontal' ? '100%' : '0%')\r\n            .attr('y2', direction === 'horizontal' ? '0%' : '100%');\r\n\r\n        colors.forEach((color, i) => {\r\n            gradient.append('stop')\r\n                .attr('offset', `${(i / (colors.length - 1)) * 100}%`)\r\n                .attr('stop-color', color);\r\n        });\r\n\r\n        return `url(#${id})`;\r\n    }\r\n\r\n    protected addGlassEffect(selection: d3.Selection<any, any, any, any>, strength: 'subtle' | 'medium' | 'strong' = 'medium'): void {\r\n        const opacityMap = { subtle: 0.5, medium: 0.7, strong: 0.85 };\r\n        selection\r\n            .style('fill', function () {\r\n                const currentFill = d3.select(this).style('fill');\r\n                return currentFill;\r\n            })\r\n            .style('fill-opacity', opacityMap[strength])\r\n            .style('filter', 'url(#shadow-3d)');\r\n    }\r\n\r\n    protected addHoverEffect(selection: d3.Selection<any, any, any, any>, scale: number = 1.05): void {\r\n        selection\r\n            .style('cursor', 'pointer')\r\n            .on('mouseenter', function () {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .ease(d3.easeCubicOut)\r\n                    .style('filter', 'url(#glow-strong) url(#shadow-3d-strong)')\r\n                    .attr('transform', function () {\r\n                        const current = d3.select(this).attr('transform') || '';\r\n                        return current + ` scale(${scale})`;\r\n                    });\r\n            })\r\n            .on('mouseleave', function () {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .ease(d3.easeCubicOut)\r\n                    .style('filter', 'url(#shadow-3d)')\r\n                    .attr('transform', function () {\r\n                        const current = d3.select(this).attr('transform') || '';\r\n                        return current.replace(` scale(${scale})`, '');\r\n                    });\r\n            });\r\n    }\r\n\r\n    protected add3DDepth(selection: d3.Selection<any, any, any, any>, depth: number = 4): void {\r\n        selection.each(function () {\r\n            const element = d3.select(this);\r\n            const color = element.attr('fill') || element.style('fill');\r\n\r\n            // Create depth layers\r\n            for (let i = depth; i > 0; i--) {\r\n                const depthLayer = element.clone(true);\r\n                depthLayer\r\n                    .attr('fill', d3.color(color)?.darker(i * 0.3).toString() || color)\r\n                    .attr('transform', `translate(0, ${i})`)\r\n                    .style('opacity', 0.2)\r\n                    .lower();\r\n            }\r\n        });\r\n    }\r\n\r\n    protected formatNumber(value: number, decimals: number = 2): string {\r\n        return value.toLocaleString(undefined, {\r\n            minimumFractionDigits: 0,\r\n            maximumFractionDigits: decimals,\r\n        });\r\n    }\r\n\r\n    protected resize(width: number, height: number): void {\r\n        this.dimensions.width = width;\r\n        this.dimensions.height = height;\r\n        this.calculateInnerDimensions();\r\n\r\n        if (this.svg) {\r\n            this.svg\r\n                .attr('width', width)\r\n                .attr('height', height);\r\n        }\r\n\r\n        this.render();\r\n    }\r\n\r\n    abstract render(): void;\r\n    abstract updateData(data: any): void;\r\n}\r\n",
            "properties": [
                {
                    "name": "bottom",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 8
                },
                {
                    "name": "left",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "right",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "top",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 6
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "GaugeConfig",
            "id": "interface-GaugeConfig-f21a6225cb9661e5c79b63711ef92f14d42da075bd9a5b1784dee4dfd96527e7e994e7038ac34b8c9fd433086774c35541c9f6282265b4ba81054c301e33f42a",
            "file": "src/components/charts/gauge/gauge.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { GaugeData } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface GaugeConfig {\r\n    animated?: boolean;\r\n    showValue?: boolean;\r\n    showLabel?: boolean;\r\n    arcWidth?: number;\r\n    startAngle?: number;\r\n    endAngle?: number;\r\n}\r\n\r\n@Component({\r\n    selector: 'app-gauge',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './gauge.html',\r\n    styleUrl: './gauge.css',\r\n})\r\nexport class Gauge implements OnInit, OnChanges {\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: GaugeData = { value: 0, min: 0, max: 100 };\r\n    @Input() width: number = 400;\r\n    @Input() height: number = 300;\r\n    @Input() config: GaugeConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'gauge-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.width / 2},${this.height * 0.75})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        const gradient = defs.append('linearGradient')\r\n            .attr('id', 'gauge-gradient')\r\n            .attr('x1', '0%')\r\n            .attr('y1', '0%')\r\n            .attr('x2', '100%')\r\n            .attr('y2', '0%');\r\n\r\n        gradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', '#10b981');\r\n\r\n        gradient.append('stop')\r\n            .attr('offset', '50%')\r\n            .attr('stop-color', '#f59e0b');\r\n\r\n        gradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', '#ef4444');\r\n\r\n        const glassGradient = defs.append('radialGradient')\r\n            .attr('id', 'gauge-glass-gradient');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.6)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        const shadow = defs.append('filter')\r\n            .attr('id', 'gauge-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 3);\r\n\r\n        shadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 3);\r\n\r\n        shadow.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const feMerge = shadow.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        const radius = Math.min(this.width, this.height * 1.5) / 2 - 20;\r\n        const arcWidth = this.config.arcWidth ?? 40;\r\n        const startAngle = this.config.startAngle ?? -Math.PI * 0.75;\r\n        const endAngle = this.config.endAngle ?? Math.PI * 0.75;\r\n\r\n        const backgroundArc = d3.arc()\r\n            .innerRadius(radius - arcWidth)\r\n            .outerRadius(radius)\r\n            .startAngle(startAngle)\r\n            .endAngle(endAngle)\r\n            .cornerRadius(8);\r\n\r\n        this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle })\r\n            .attr('class', 'gauge-background')\r\n            .attr('d', backgroundArc as any)\r\n            .attr('fill', 'var(--color-border)')\r\n            .attr('opacity', 0.2);\r\n\r\n        const valueArc = d3.arc()\r\n            .innerRadius(radius - arcWidth)\r\n            .outerRadius(radius)\r\n            .startAngle(startAngle)\r\n            .cornerRadius(8);\r\n\r\n        const percentage = (this.data.value - this.data.min) / (this.data.max - this.data.min);\r\n        const valueAngle = startAngle + (endAngle - startAngle) * percentage;\r\n\r\n        this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle: valueAngle })\r\n            .attr('class', 'gauge-value-shadow')\r\n            .attr('d', valueArc as any)\r\n            .attr('transform', 'translate(0, 3)')\r\n            .attr('fill', 'rgba(0, 0, 0, 0.2)');\r\n\r\n        const valuePath = this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle: startAngle })\r\n            .attr('class', 'gauge-value')\r\n            .attr('d', valueArc as any)\r\n            .attr('fill', this.getColor(percentage))\r\n            .style('filter', 'url(#gauge-shadow)');\r\n\r\n        if (this.config.animated !== false) {\r\n            valuePath\r\n                .transition()\r\n                .duration(1500)\r\n                .ease(d3.easeElasticOut.amplitude(1).period(0.5))\r\n                .attrTween('d', function () {\r\n                    const interpolate = d3.interpolate(startAngle, valueAngle);\r\n                    return function (t: number) {\r\n                        const currentAngle = interpolate(t);\r\n                        return valueArc({ startAngle, endAngle: currentAngle } as any)!;\r\n                    };\r\n                });\r\n        } else {\r\n            valuePath.datum({ startAngle, endAngle: valueAngle }).attr('d', valueArc as any);\r\n        }\r\n\r\n        this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle: valueAngle })\r\n            .attr('class', 'gauge-glass')\r\n            .attr('d', valueArc as any)\r\n            .attr('fill', 'url(#gauge-glass-gradient)')\r\n            .attr('pointer-events', 'none')\r\n            .attr('opacity', 0.3);\r\n\r\n        this.chartGroup.append('circle')\r\n            .attr('r', radius - arcWidth - 10)\r\n            .attr('fill', 'var(--color-background)')\r\n            .attr('opacity', 0.5)\r\n            .style('filter', 'url(#gauge-shadow)');\r\n\r\n        if (this.config.showValue !== false) {\r\n            const valueText = this.chartGroup.append('text')\r\n                .attr('class', 'gauge-value-text')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '-0.3em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', radius / 3)\r\n                .attr('font-weight', '700')\r\n                .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.2)');\r\n\r\n            if (this.config.animated !== false) {\r\n                valueText.text('0');\r\n                const targetValue = this.data.value;\r\n                valueText\r\n                    .transition()\r\n                    .duration(1500)\r\n                    .tween('text', function () {\r\n                        const interpolate = d3.interpolate(0, targetValue);\r\n                        const element = this;\r\n                        return function (t: number) {\r\n                            d3.select(element).text(Math.round(interpolate(t)));\r\n                        };\r\n                    });\r\n            } else {\r\n                valueText.text(Math.round(this.data.value));\r\n            }\r\n        }\r\n\r\n        if (this.config.showLabel !== false && this.data.label) {\r\n            this.chartGroup.append('text')\r\n                .attr('class', 'gauge-label-text')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '1.2em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', 'var(--font-size-sm)')\r\n                .attr('opacity', 0.7)\r\n                .text(this.data.label);\r\n        }\r\n\r\n        if (this.data.thresholds && this.data.thresholds.length > 0) {\r\n            this.addThresholds(radius, arcWidth, startAngle, endAngle);\r\n        }\r\n    }\r\n\r\n    private addThresholds(\r\n        radius: number,\r\n        arcWidth: number,\r\n        startAngle: number,\r\n        endAngle: number\r\n    ): void {\r\n        const thresholdGroup = this.chartGroup.append('g').attr('class', 'thresholds');\r\n\r\n        this.data.thresholds?.forEach(threshold => {\r\n            const percentage = (threshold.value - this.data.min) / (this.data.max - this.data.min);\r\n            const angle = startAngle + (endAngle - startAngle) * percentage;\r\n\r\n            const x1 = Math.cos(angle) * (radius - arcWidth - 5);\r\n            const y1 = Math.sin(angle) * (radius - arcWidth - 5);\r\n            const x2 = Math.cos(angle) * (radius + 5);\r\n            const y2 = Math.sin(angle) * (radius + 5);\r\n\r\n            thresholdGroup.append('line')\r\n                .attr('x1', x1)\r\n                .attr('y1', y1)\r\n                .attr('x2', x2)\r\n                .attr('y2', y2)\r\n                .attr('stroke', threshold.color)\r\n                .attr('stroke-width', 2)\r\n                .attr('opacity', 0.6);\r\n        });\r\n    }\r\n\r\n    private getColor(percentage: number): string {\r\n        if (percentage < 0.3) return '#ef4444';\r\n        if (percentage < 0.6) return '#f59e0b';\r\n        if (percentage < 0.8) return '#eab308';\r\n        return '#10b981';\r\n    }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "arcWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "endAngle",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "showLabel",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "showValue",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                },
                {
                    "name": "startAngle",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "GaugeData",
            "id": "interface-GaugeData-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 38
                },
                {
                    "name": "max",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 37
                },
                {
                    "name": "min",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 36
                },
                {
                    "name": "thresholds",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "GaugeThreshold[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 39
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "GaugeThreshold",
            "id": "interface-GaugeThreshold-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 44
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 45
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 43
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "HeatmapConfig",
            "id": "interface-HeatmapConfig-e5fc9cd4c28d22dc4a74645cb8427b84189dfb3a79c329dc09dfeea62259c4e989b9dcd71500036b983239f49040f6a10f5e29dcb4e42dbe146b9e6d9d8b5deb",
            "file": "src/components/charts/heatmap/heatmap.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { HeatmapDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface HeatmapConfig {\r\n  showValues?: boolean;\r\n  animated?: boolean;\r\n  cellRadius?: number;\r\n  colorScheme?: 'blues' | 'greens' | 'reds' | 'purples' | 'viridis' | 'plasma';\r\n  customTooltip?: (data: { x: string | number; y: string | number; value: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-heatmap',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './heatmap.html',\r\n  styleUrl: './heatmap.css',\r\n})\r\nexport class Heatmap implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) { }\r\n\r\n  @Input() data: HeatmapDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: HeatmapConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 60, right: 40, bottom: 80, left: 80 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'heatmap-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'heatmap-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '100%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.4)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'heatmap-cell-shadow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 2);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 2)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.3);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const xValues = Array.from(new Set(this.data.map(d => String(d.x)))).sort();\r\n    const yValues = Array.from(new Set(this.data.map(d => String(d.y)))).sort();\r\n\r\n    const xScale = d3.scaleBand()\r\n      .domain(xValues)\r\n      .range([0, this.innerWidth])\r\n      .padding(0.05);\r\n\r\n    const yScale = d3.scaleBand()\r\n      .domain(yValues)\r\n      .range([0, this.innerHeight])\r\n      .padding(0.05);\r\n\r\n    const colorScale = this.getColorScale();\r\n\r\n    this.addAxes(xScale, yScale);\r\n\r\n    this.addCells(xScale, yScale, colorScale);\r\n\r\n    this.addLegend(colorScale);\r\n  }\r\n\r\n  private getColorScale(): d3.ScaleSequential<string> {\r\n    const values = this.data.map(d => d.value);\r\n    const extent = d3.extent(values) as [number, number];\r\n\r\n    const scheme = this.config.colorScheme || 'blues';\r\n\r\n    switch (scheme) {\r\n      case 'blues':\r\n        return d3.scaleSequential(d3.interpolateBlues).domain(extent);\r\n      case 'greens':\r\n        return d3.scaleSequential(d3.interpolateGreens).domain(extent);\r\n      case 'reds':\r\n        return d3.scaleSequential(d3.interpolateReds).domain(extent);\r\n      case 'purples':\r\n        return d3.scaleSequential(d3.interpolatePurples).domain(extent);\r\n      case 'viridis':\r\n        return d3.scaleSequential(d3.interpolateViridis).domain(extent);\r\n      case 'plasma':\r\n        return d3.scaleSequential(d3.interpolatePlasma).domain(extent);\r\n      default:\r\n        return d3.scaleSequential(d3.interpolateBlues).domain(extent);\r\n    }\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleBand<string>,\r\n    yScale: d3.ScaleBand<string>\r\n  ): void {\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(d3.axisBottom(xScale).tickSize(0))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)')\r\n      .style('text-anchor', 'end')\r\n      .attr('transform', 'rotate(-45)')\r\n      .attr('dx', '-0.8em')\r\n      .attr('dy', '0.15em');\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(d3.axisLeft(yScale).tickSize(0))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    this.chartGroup.selectAll('.tick line').remove();\r\n  }\r\n\r\n  private addCells(\r\n    xScale: d3.ScaleBand<string>,\r\n    yScale: d3.ScaleBand<string>,\r\n    colorScale: d3.ScaleSequential<string>\r\n  ): void {\r\n    const cellRadius = this.config.cellRadius ?? 4;\r\n    const cellsGroup = this.chartGroup.append('g').attr('class', 'cells');\r\n\r\n    const cells = cellsGroup.selectAll('.cell-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'cell-group');\r\n\r\n    cells.append('rect')\r\n      .attr('class', 'cell-shadow')\r\n      .attr('x', d => (xScale(String(d.x)) || 0) + 2)\r\n      .attr('y', d => (yScale(String(d.y)) || 0) + 2)\r\n      .attr('width', xScale.bandwidth())\r\n      .attr('height', yScale.bandwidth())\r\n      .attr('rx', cellRadius)\r\n      .attr('ry', cellRadius)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.1)');\r\n\r\n    cells.append('rect')\r\n      .attr('class', 'cell')\r\n      .attr('x', d => xScale(String(d.x)) || 0)\r\n      .attr('y', d => yScale(String(d.y)) || 0)\r\n      .attr('width', xScale.bandwidth())\r\n      .attr('height', yScale.bandwidth())\r\n      .attr('rx', cellRadius)\r\n      .attr('ry', cellRadius)\r\n      .attr('fill', d => d.color || colorScale(d.value))\r\n      .style('filter', 'url(#heatmap-cell-shadow)')\r\n      .attr('opacity', 0)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('opacity', 1);\r\n\r\n    cells.append('rect')\r\n      .attr('class', 'cell-glass')\r\n      .attr('x', d => xScale(String(d.x)) || 0)\r\n      .attr('y', d => yScale(String(d.y)) || 0)\r\n      .attr('width', xScale.bandwidth())\r\n      .attr('height', yScale.bandwidth())\r\n      .attr('rx', cellRadius)\r\n      .attr('ry', cellRadius)\r\n      .attr('fill', 'url(#heatmap-glass-gradient)')\r\n      .attr('pointer-events', 'none')\r\n      .attr('opacity', 0)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('opacity', 0.3);\r\n\r\n    cells.selectAll('.cell')\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(200)\r\n          .attr('opacity', 0.8)\r\n          .attr('stroke', '#fff')\r\n          .attr('stroke-width', 2);\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(200)\r\n          .attr('opacity', 1)\r\n          .attr('stroke', 'none');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n\r\n    if (this.config.showValues) {\r\n      cells.append('text')\r\n        .attr('class', 'cell-value')\r\n        .attr('x', d => (xScale(String(d.x)) || 0) + xScale.bandwidth() / 2)\r\n        .attr('y', d => (yScale(String(d.y)) || 0) + yScale.bandwidth() / 2 + 4)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', d => {\r\n          const color = d3.color(d.color || colorScale(d.value));\r\n          const brightness = color ? (color as any).r * 0.299 + (color as any).g * 0.587 + (color as any).b * 0.114 : 128;\r\n          return brightness > 128 ? '#000' : '#fff';\r\n        })\r\n        .attr('font-size', 'var(--font-size-xs)')\r\n        .attr('font-weight', '600')\r\n        .style('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.3)')\r\n        .attr('opacity', 0)\r\n        .text(d => d.value.toFixed(1))\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 300)\r\n        .attr('opacity', 1);\r\n    }\r\n  }\r\n\r\n  private addLegend(colorScale: d3.ScaleSequential<string>): void {\r\n    const legendWidth = 20;\r\n    const legendHeight = 200;\r\n    const legendX = this.innerWidth + 20;\r\n    const legendY = (this.innerHeight - legendHeight) / 2;\r\n\r\n    const legendGroup = this.chartGroup.append('g')\r\n      .attr('class', 'legend')\r\n      .attr('transform', `translate(${legendX},${legendY})`);\r\n\r\n    const defs = this.svg.select('defs');\r\n    const legendGradient = defs.append('linearGradient')\r\n      .attr('id', 'legend-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '100%')\r\n      .attr('x2', '0%')\r\n      .attr('y2', '0%');\r\n\r\n    const domain = colorScale.domain();\r\n    const steps = 10;\r\n    for (let i = 0; i <= steps; i++) {\r\n      const value = domain[0] + (domain[1] - domain[0]) * (i / steps);\r\n      legendGradient.append('stop')\r\n        .attr('offset', `${(i / steps) * 100}%`)\r\n        .attr('stop-color', colorScale(value));\r\n    }\r\n\r\n    legendGroup.append('rect')\r\n      .attr('width', legendWidth)\r\n      .attr('height', legendHeight)\r\n      .attr('fill', 'url(#legend-gradient)')\r\n      .attr('rx', 4)\r\n      .style('filter', 'url(#heatmap-cell-shadow)');\r\n\r\n    const legendScale = d3.scaleLinear()\r\n      .domain(domain)\r\n      .range([legendHeight, 0]);\r\n\r\n    const legendAxis = d3.axisRight(legendScale)\r\n      .ticks(5);\r\n\r\n    legendGroup.append('g')\r\n      .attr('transform', `translate(${legendWidth},0)`)\r\n      .call(legendAxis)\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-xs)');\r\n\r\n    legendGroup.select('.domain').remove();\r\n    legendGroup.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('x2', 6);\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: HeatmapDataPoint, colorScale: d3.ScaleSequential<string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip({\r\n        x: dataPoint.x,\r\n        y: dataPoint.y,\r\n        value: dataPoint.value,\r\n        color: dataPoint.color || colorScale(dataPoint.value)\r\n      });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = `${dataPoint.x}, ${dataPoint.y}`;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: dataPoint.value.toFixed(2), color: dataPoint.color || colorScale(dataPoint.value) }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                },
                {
                    "name": "cellRadius",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "colorScheme",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"blues\" | \"greens\" | \"reds\" | \"purples\" | \"viridis\" | \"plasma\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                },
                {
                    "name": "showValues",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 7
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "HeatmapDataPoint",
            "id": "interface-HeatmapDataPoint-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 25
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 24
                },
                {
                    "name": "x",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string | number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 22
                },
                {
                    "name": "y",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string | number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 23
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "LegendConfig",
            "id": "interface-LegendConfig-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "interactive",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 77
                },
                {
                    "name": "orientation",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"horizontal\" | \"vertical\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 76
                },
                {
                    "name": "position",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"top\" | \"bottom\" | \"left\" | \"right\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 75
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "LegendItem",
            "id": "interface-LegendItem-254e23b7f9caa72fc8a63ff3d870e41b34543000c9918d254b64695f6312b567db9a9e127973894cb0b7f48fb082f024e47763aeb68cf1e546f52712cdf3b6e9",
            "file": "src/components/base/legend/legend.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { CommonModule } from '@angular/common';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport interface LegendItem {\r\n    label: string;\r\n    color: string;\r\n    visible?: boolean;\r\n    shape?: 'circle' | 'square' | 'line' | 'rect';\r\n    value?: string | number;\r\n}\r\n\r\nexport type LegendPosition = 'top' | 'bottom' | 'left' | 'right';\r\nexport type LegendOrientation = 'horizontal' | 'vertical';\r\n\r\n@Component({\r\n    selector: 'app-legend',\r\n    standalone: true,\r\n    imports: [CommonModule],\r\n    templateUrl: './legend.html',\r\n    styleUrl: './legend.css',\r\n})\r\nexport class Legend {\r\n\r\n    constructor(themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n    @Input() items: LegendItem[] = [];\r\n    @Input() position: LegendPosition = 'bottom';\r\n    @Input() orientation: LegendOrientation = 'horizontal';\r\n    @Input() interactive: boolean = true;\r\n\r\n    @Output() itemClick = new EventEmitter<LegendItem>();\r\n    @Output() itemHover = new EventEmitter<LegendItem | null>();\r\n\r\n    onItemClick(item: LegendItem): void {\r\n        if (this.interactive) {\r\n            this.itemClick.emit(item);\r\n        }\r\n    }\r\n\r\n    onItemMouseEnter(item: LegendItem): void {\r\n        if (this.interactive) {\r\n            this.itemHover.emit(item);\r\n        }\r\n    }\r\n\r\n    onItemMouseLeave(): void {\r\n        if (this.interactive) {\r\n            this.itemHover.emit(null);\r\n        }\r\n    }\r\n\r\n    getShapeClass(item: LegendItem): string {\r\n        return `legend-shape legend-shape-${item.shape || 'circle'}`;\r\n    }\r\n\r\n    isVisible(item: LegendItem): boolean {\r\n        return item.visible !== false;\r\n    }\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 6
                },
                {
                    "name": "shape",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"circle\" | \"square\" | \"line\" | \"rect\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string | number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "visible",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "LineChartConfig",
            "id": "interface-LineChartConfig-cb0eacc9ec279a2a4a0cacb63b63264789c44295348fe22cf3961b718ebbfce6b502ab1eac5658f22c6804cd5581f00d594d772c8a18babe714fb0a6e6fc587c",
            "file": "src/components/charts/line/line.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { TimeSeriesDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface LineChartConfig {\r\n  showGrid?: boolean;\r\n  showPoints?: boolean;\r\n  showArea?: boolean;\r\n  curved?: boolean;\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  lineWidth?: number;\r\n  multiSeries?: boolean;\r\n  customTooltip?: (data: { date: Date; value: number; seriesName?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-line',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './line.html',\r\n  styleUrl: './line.css',\r\n})\r\nexport class Line implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) { }\r\n\r\n  @Input() data: TimeSeriesDataPoint[] | Record<string, TimeSeriesDataPoint[]> = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: LineChartConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'line-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const areaGradient = defs.append('linearGradient')\r\n      .attr('id', 'line-area-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '0%')\r\n      .attr('y2', '100%');\r\n\r\n    areaGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'var(--color-primary)')\r\n      .attr('stop-opacity', 0.4);\r\n\r\n    areaGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'var(--color-primary)')\r\n      .attr('stop-opacity', 0);\r\n\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'line-glow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 3)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || (Array.isArray(this.data) && this.data.length === 0)) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const isMultiSeries = !Array.isArray(this.data);\r\n    const seriesData: Record<string, TimeSeriesDataPoint[]> = isMultiSeries\r\n      ? this.data as Record<string, TimeSeriesDataPoint[]>\r\n      : { 'Series 1': this.data as TimeSeriesDataPoint[] };\r\n\r\n    const allData = Object.values(seriesData).flat();\r\n\r\n    const xScale = d3.scaleTime()\r\n      .domain(d3.extent(allData, d => d.date) as [Date, Date])\r\n      .range([0, this.innerWidth]);\r\n\r\n    const yScale = d3.scaleLinear()\r\n      .domain([0, d3.max(allData, d => d.value) || 0])\r\n      .nice()\r\n      .range([this.innerHeight, 0]);\r\n\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(Object.keys(seriesData))\r\n      .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444']);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(xScale, yScale);\r\n    }\r\n\r\n    this.addAxes(xScale, yScale);\r\n\r\n    Object.entries(seriesData).forEach(([seriesName, data], index) => {\r\n      this.addLine(data, xScale, yScale, colorScale(seriesName), index, seriesName);\r\n    });\r\n\r\n    // Add hover overlay for better tooltip interaction\r\n    this.addHoverOverlay(seriesData, xScale, yScale, colorScale);\r\n  }\r\n\r\n  private addGrid(\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    gridGroup.selectAll('.grid-line-y')\r\n      .data(yScale.ticks(5))\r\n      .join('line')\r\n      .attr('class', 'grid-line-y')\r\n      .attr('x1', 0)\r\n      .attr('x2', this.innerWidth)\r\n      .attr('y1', d => yScale(d))\r\n      .attr('y2', d => yScale(d))\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1)\r\n      .attr('stroke-dasharray', '4,4')\r\n      .attr('opacity', 0.2);\r\n\r\n    gridGroup.selectAll('.grid-line-x')\r\n      .data(xScale.ticks(5))\r\n      .join('line')\r\n      .attr('class', 'grid-line-x')\r\n      .attr('x1', d => xScale(d))\r\n      .attr('x2', d => xScale(d))\r\n      .attr('y1', 0)\r\n      .attr('y2', this.innerHeight)\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1)\r\n      .attr('stroke-dasharray', '4,4')\r\n      .attr('opacity', 0.2);\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(d3.axisBottom(xScale).ticks(5))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(d3.axisLeft(yScale).ticks(5))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('opacity', 0.5);\r\n  }\r\n\r\n  private addLine(\r\n    data: TimeSeriesDataPoint[],\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    color: string,\r\n    index: number,\r\n    seriesName: string\r\n  ): void {\r\n    const lineGroup = this.chartGroup.append('g')\r\n      .attr('class', `line-group-${index}`);\r\n\r\n    const lineGenerator = this.config.curved !== false\r\n      ? d3.line<TimeSeriesDataPoint>()\r\n        .x(d => xScale(d.date))\r\n        .y(d => yScale(d.value))\r\n        .curve(d3.curveMonotoneX)\r\n      : d3.line<TimeSeriesDataPoint>()\r\n        .x(d => xScale(d.date))\r\n        .y(d => yScale(d.value));\r\n\r\n    if (this.config.showArea) {\r\n      const areaGenerator = this.config.curved !== false\r\n        ? d3.area<TimeSeriesDataPoint>()\r\n          .x(d => xScale(d.date))\r\n          .y0(this.innerHeight)\r\n          .y1(d => yScale(d.value))\r\n          .curve(d3.curveMonotoneX)\r\n        : d3.area<TimeSeriesDataPoint>()\r\n          .x(d => xScale(d.date))\r\n          .y0(this.innerHeight)\r\n          .y1(d => yScale(d.value));\r\n\r\n      const areaPath = lineGroup.append('path')\r\n        .datum(data)\r\n        .attr('class', 'line-area')\r\n        .attr('d', areaGenerator)\r\n        .attr('fill', color)\r\n        .attr('opacity', 0.2);\r\n\r\n      if (this.config.animated !== false) {\r\n        const totalLength = (areaPath.node() as any)?.getTotalLength() || 0;\r\n        areaPath\r\n          .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\r\n          .attr('stroke-dashoffset', totalLength)\r\n          .transition()\r\n          .duration(1000)\r\n          .delay(index * 200)\r\n          .attr('stroke-dashoffset', 0)\r\n          .attr('stroke-dasharray', 'none');\r\n      }\r\n    }\r\n\r\n    const linePath = lineGroup.append('path')\r\n      .datum(data)\r\n      .attr('class', 'line-path')\r\n      .attr('d', lineGenerator)\r\n      .attr('fill', 'none')\r\n      .attr('stroke', color)\r\n      .attr('stroke-width', this.config.lineWidth || 3)\r\n      .attr('stroke-linecap', 'round')\r\n      .attr('stroke-linejoin', 'round')\r\n      .style('filter', 'url(#line-glow)');\r\n\r\n    if (this.config.animated !== false) {\r\n      const totalLength = (linePath.node() as any)?.getTotalLength() || 0;\r\n      linePath\r\n        .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\r\n        .attr('stroke-dashoffset', totalLength)\r\n        .transition()\r\n        .duration(1000)\r\n        .delay(index * 200)\r\n        .attr('stroke-dashoffset', 0);\r\n    }\r\n\r\n    if (this.config.showPoints !== false) {\r\n      lineGroup.selectAll('.line-point')\r\n        .data(data)\r\n        .join('circle')\r\n        .attr('class', 'line-point')\r\n        .attr('cx', d => xScale(d.date))\r\n        .attr('cy', d => yScale(d.value))\r\n        .attr('r', 0)\r\n        .attr('fill', color)\r\n        .attr('stroke', '#fff')\r\n        .attr('stroke-width', 2)\r\n        .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))')\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 400 : 0)\r\n        .delay((_, i) => (this.config.animated !== false ? index * 200 + 800 + i * 30 : 0))\r\n        .attr('r', 5);\r\n\r\n      lineGroup.selectAll('.line-point')\r\n        .on('mouseenter', (event, d: any) => {\r\n          d3.select(event.currentTarget)\r\n            .transition()\r\n            .duration(200)\r\n            .attr('r', 7)\r\n            .attr('stroke-width', 3);\r\n\r\n          this.ngZone.run(() => {\r\n            this.showTooltip(event, d, seriesName, color);\r\n          });\r\n        })\r\n        .on('mouseleave', (event) => {\r\n          d3.select(event.currentTarget)\r\n            .transition()\r\n            .duration(200)\r\n            .attr('r', 5)\r\n            .attr('stroke-width', 2);\r\n\r\n          this.ngZone.run(() => {\r\n            this.hideTooltip();\r\n          });\r\n        });\r\n    }\r\n  }\r\n  private sanitizeClassName(name: string): string {\r\n    return name.replace(/[^a-zA-Z0-9-_]/g, '-');\r\n  }\r\n\r\n  private addHoverOverlay(\r\n    seriesData: Record<string, TimeSeriesDataPoint[]>,\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    const overlay = this.chartGroup\r\n      .append('rect')\r\n      .attr('class', 'hover-overlay')\r\n      .attr('width', this.innerWidth)\r\n      .attr('height', this.innerHeight)\r\n      .attr('fill', 'none')\r\n      .attr('pointer-events', 'all')\r\n      .style('cursor', 'crosshair');\r\n\r\n    // Create vertical line for hover\r\n    const hoverLine = this.chartGroup\r\n      .append('line')\r\n      .attr('class', 'hover-line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1)\r\n      .attr('stroke-dasharray', '4,4')\r\n      .attr('opacity', 0)\r\n      .attr('pointer-events', 'none');\r\n\r\n    // Create hover circles for each series\r\n    const hoverCircles = this.chartGroup\r\n      .append('g')\r\n      .attr('class', 'hover-circles')\r\n      .attr('pointer-events', 'none');\r\n\r\n    Object.entries(seriesData).forEach(([seriesName]) => {\r\n      hoverCircles\r\n        .append('circle')\r\n        .attr('class', `hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n        .attr('r', 5)\r\n        .attr('fill', colorScale(seriesName))\r\n        .attr('stroke', '#fff')\r\n        .attr('stroke-width', 2)\r\n        .attr('opacity', 0)\r\n        .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))');\r\n    });\r\n\r\n    overlay\r\n      .on('mousemove', (event) => {\r\n        const [mouseX] = d3.pointer(event);\r\n        const hoveredDate = xScale.invert(mouseX);\r\n\r\n        // Find closest data points for each series\r\n        const closestPoints: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }> = [];\r\n\r\n        Object.entries(seriesData).forEach(([seriesName, data]) => {\r\n          const bisect = d3.bisector<TimeSeriesDataPoint, Date>(d => d.date).left;\r\n          const index = bisect(data, hoveredDate);\r\n\r\n          const d0 = data[index - 1];\r\n          const d1 = data[index];\r\n\r\n          let closest = d0;\r\n          if (d1 && d0) {\r\n            closest = hoveredDate.getTime() - d0.date.getTime() > d1.date.getTime() - hoveredDate.getTime() ? d1 : d0;\r\n          } else if (d1) {\r\n            closest = d1;\r\n          }\r\n\r\n          if (closest) {\r\n            const distance = Math.abs(xScale(closest.date) - mouseX);\r\n            closestPoints.push({ seriesName, point: closest, distance });\r\n          }\r\n        });\r\n\r\n        if (closestPoints.length > 0) {\r\n          // Sort by distance and take the closest one for positioning\r\n          closestPoints.sort((a, b) => a.distance - b.distance);\r\n          const mainPoint = closestPoints[0];\r\n\r\n          // Show vertical line\r\n          hoverLine\r\n            .attr('x1', xScale(mainPoint.point.date))\r\n            .attr('x2', xScale(mainPoint.point.date))\r\n            .attr('y1', 0)\r\n            .attr('y2', this.innerHeight)\r\n            .attr('opacity', 0.6);\r\n\r\n          // Show circles for all series\r\n          closestPoints.forEach(({ seriesName, point }) => {\r\n            hoverCircles\r\n              .select(`.hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n              .attr('cx', xScale(point.date))\r\n              .attr('cy', yScale(point.value))\r\n              .attr('opacity', 1);\r\n          });\r\n\r\n          // Show tooltip with all series data\r\n          this.ngZone.run(() => {\r\n            this.showMultiSeriesTooltip(event, closestPoints, colorScale);\r\n          });\r\n        }\r\n      })\r\n      .on('mouseleave', () => {\r\n        hoverLine.attr('opacity', 0);\r\n        hoverCircles.selectAll('circle').attr('opacity', 0);\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: TimeSeriesDataPoint, seriesName: string, color: string): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip({ date: dataPoint.date, value: dataPoint.value, seriesName });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = seriesName;\r\n      this.tooltipData = [\r\n        { label: 'Date', value: dataPoint.date.toLocaleDateString() },\r\n        { label: 'Value', value: dataPoint.value.toFixed(2), color }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n  }\r\n\r\n  private showMultiSeriesTooltip(\r\n    event: MouseEvent,\r\n    points: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    if (this.config.customTooltip && points.length > 0) {\r\n      const customData = this.config.customTooltip({\r\n        date: points[0].point.date,\r\n        value: points[0].point.value,\r\n        seriesName: points[0].seriesName\r\n      });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = points[0].point.date.toLocaleDateString();\r\n      this.tooltipData = points.map(({ seriesName, point }) => ({\r\n        label: seriesName,\r\n        value: point.value.toFixed(2),\r\n        color: colorScale(seriesName)\r\n      }));\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "curved",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 15
                },
                {
                    "name": "lineWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 13
                },
                {
                    "name": "multiSeries",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "showArea",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "showGrid",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "showPoints",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "MultiSeriesDataPoint",
            "id": "interface-MultiSeriesDataPoint-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 17
                },
                {
                    "name": "values",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "Record<string | number>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 18
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "PieChartConfig",
            "id": "interface-PieChartConfig-0aafc65360270c6efe415c2703855ae12c56821687a8cd1f13ef8d7fcf3b8681e4d7934f95e73c541ebc5edacdca9d0d2da98063c48df04919cf574434677dbb",
            "file": "src/components/charts/pie/pie.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ChartDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface PieChartConfig {\r\n    showLabels?: boolean;\r\n    showPercentages?: boolean;\r\n    animated?: boolean;\r\n    innerRadius?: number;\r\n    padAngle?: number;\r\n    cornerRadius?: number;\r\n    colors?: string[];\r\n    customTooltip?: (data: { label: string; value: number; percentage: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n    selector: 'app-pie',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './pie.html',\r\n    styleUrl: './pie.css',\r\n})\r\nexport class Pie implements OnInit, OnChanges {\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: ChartDataPoint[] = [];\r\n    @Input() width: number = 500;\r\n    @Input() height: number = 500;\r\n    @Input() config: PieChartConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n\r\n    constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) { }\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'pie-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.width / 2},${this.height / 2})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Glass gradient\r\n        const glassGradient = defs.append('radialGradient')\r\n            .attr('id', 'pie-glass-gradient');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.6)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // 3D shadow\r\n        const shadow = defs.append('filter')\r\n            .attr('id', 'pie-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 4);\r\n\r\n        shadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 4);\r\n\r\n        shadow.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const feMerge = shadow.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        if (!this.data || this.data.length === 0) return;\r\n\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        const radius = Math.min(this.width, this.height) / 2 - 60;\r\n        const innerRadius = this.config.innerRadius ?? 0;\r\n\r\n        // Color scale\r\n        const colorScale = d3.scaleOrdinal<string>()\r\n            .domain(this.data.map(d => d.label))\r\n            .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4', '#f97316']);\r\n\r\n        // Pie layout\r\n        const pie = d3.pie<ChartDataPoint>()\r\n            .value(d => d.value)\r\n            .sort(null)\r\n            .padAngle(this.config.padAngle ?? 0.02);\r\n\r\n        // Arc generator\r\n        const arc = d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n            .innerRadius(innerRadius)\r\n            .outerRadius(radius)\r\n            .cornerRadius(this.config.cornerRadius ?? 4);\r\n\r\n        // Outer arc for labels\r\n        const outerArc = d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n            .innerRadius(radius + 20)\r\n            .outerRadius(radius + 20);\r\n\r\n        // Create slices\r\n        const slices = this.chartGroup.selectAll('.slice-group')\r\n            .data(pie(this.data))\r\n            .join('g')\r\n            .attr('class', 'slice-group');\r\n\r\n        // Shadow slices\r\n        slices.append('path')\r\n            .attr('class', 'slice-shadow')\r\n            .attr('d', arc as any)\r\n            .attr('transform', 'translate(0, 4)')\r\n            .attr('fill', 'rgba(0, 0, 0, 0.2)');\r\n\r\n        // Main slices\r\n        const slicePaths = slices.append('path')\r\n            .attr('class', 'slice')\r\n            .attr('fill', d => d.data.color || colorScale(d.data.label))\r\n            .style('filter', 'url(#pie-shadow)')\r\n            .style('cursor', 'pointer');\r\n\r\n        if (this.config.animated !== false) {\r\n            slicePaths\r\n                .attr('d', d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n                    .innerRadius(innerRadius)\r\n                    .outerRadius(0)\r\n                    .cornerRadius(this.config.cornerRadius ?? 4) as any)\r\n                .transition()\r\n                .duration(800)\r\n                .delay((_, i) => i * 100)\r\n                .attrTween('d', function (d: any) {\r\n                    const interpolate = d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);\r\n                    return function (t: number) {\r\n                        return arc(interpolate(t) as any)!;\r\n                    };\r\n                });\r\n        } else {\r\n            slicePaths.attr('d', arc as any);\r\n        }\r\n\r\n        // Glass overlay\r\n        slices.append('path')\r\n            .attr('class', 'slice-glass')\r\n            .attr('d', arc as any)\r\n            .attr('fill', 'url(#pie-glass-gradient)')\r\n            .attr('pointer-events', 'none')\r\n            .attr('opacity', 0.3);\r\n\r\n        // Add hover effects\r\n        const cornerRadius = this.config.cornerRadius ?? 4;\r\n        const total = d3.sum(this.data, d => d.value);\r\n\r\n        // Attach event handlers to the slice path for better control\r\n        slicePaths\r\n            .style('cursor', 'pointer')\r\n            .on('mouseenter', (event: any, d: any) => {\r\n                const element = event.currentTarget;\r\n                const arcTween = d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n                    .innerRadius(innerRadius)\r\n                    .outerRadius(radius + 10)\r\n                    .cornerRadius(cornerRadius);\r\n\r\n                d3.select(element)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('d', arcTween as any);\r\n\r\n                this.ngZone.run(() => {\r\n                    this.showTooltip(event, d.data, total, d.data.color || colorScale(d.data.label));\r\n                });\r\n            })\r\n            .on('mousemove', (event) => {\r\n                this.ngZone.run(() => {\r\n                    this.tooltipX = event.clientX;\r\n                    this.tooltipY = event.clientY;\r\n                });\r\n            })\r\n            .on('mouseleave', (event: any, d: any) => {\r\n                d3.select(event.currentTarget)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('d', arc as any);\r\n\r\n                this.ngZone.run(() => {\r\n                    this.hideTooltip();\r\n                });\r\n            });\r\n\r\n        // Add labels if enabled\r\n        if (this.config.showLabels !== false) {\r\n            this.addLabels(slices as d3.Selection<SVGGElement, d3.PieArcDatum<ChartDataPoint>, SVGGElement, unknown>, arc, outerArc, pie(this.data));\r\n        }\r\n\r\n        // Add center text for donut chart\r\n        if (innerRadius > 0) {\r\n            const total = d3.sum(this.data, d => d.value);\r\n\r\n            this.chartGroup.append('text')\r\n                .attr('class', 'donut-total-label')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '-0.3em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', 'var(--font-size-sm)')\r\n                .attr('opacity', 0.7)\r\n                .text('Total');\r\n\r\n            this.chartGroup.append('text')\r\n                .attr('class', 'donut-total-value')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '1.2em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', 'var(--font-size-xl)')\r\n                .attr('font-weight', '700')\r\n                .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.1)')\r\n                .text(total.toLocaleString());\r\n        }\r\n    }\r\n\r\n    private addLabels(\r\n        slices: d3.Selection<SVGGElement, d3.PieArcDatum<ChartDataPoint>, SVGGElement, unknown>,\r\n        arc: d3.Arc<any, d3.PieArcDatum<ChartDataPoint>>,\r\n        outerArc: d3.Arc<any, d3.PieArcDatum<ChartDataPoint>>,\r\n        pieData: d3.PieArcDatum<ChartDataPoint>[]\r\n    ): void {\r\n        const total = d3.sum(this.data, d => d.value);\r\n\r\n        // Add polylines\r\n        slices.append('polyline')\r\n            .attr('class', 'label-line')\r\n            .attr('points', d => {\r\n                const pos = outerArc.centroid(d);\r\n                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\r\n                pos[0] = (Math.min(this.width, this.height) / 2 - 30) * (midAngle < Math.PI ? 1 : -1);\r\n                return [arc.centroid(d), outerArc.centroid(d), pos].map(p => p.join(',')).join(' ');\r\n            })\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1.5)\r\n            .attr('fill', 'none')\r\n            .attr('opacity', 0.6)\r\n            .attr('pointer-events', 'none');\r\n\r\n        // Add labels\r\n        const labels = slices.append('text')\r\n            .attr('class', 'slice-label')\r\n            .attr('transform', d => {\r\n                const pos = outerArc.centroid(d);\r\n                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\r\n                pos[0] = (Math.min(this.width, this.height) / 2 - 20) * (midAngle < Math.PI ? 1 : -1);\r\n                return `translate(${pos})`;\r\n            })\r\n            .attr('text-anchor', d => {\r\n                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\r\n                return midAngle < Math.PI ? 'start' : 'end';\r\n            })\r\n            .attr('fill', 'var(--color-text)')\r\n            .attr('font-size', 'var(--font-size-sm)')\r\n            .attr('font-weight', '600')\r\n            .style('text-shadow', '0 1px 2px rgba(255, 255, 255, 0.8)')\r\n            .attr('pointer-events', 'none');\r\n\r\n        labels.append('tspan')\r\n            .attr('x', 0)\r\n            .attr('dy', '0em')\r\n            .text(d => d.data.label);\r\n\r\n        if (this.config.showPercentages !== false) {\r\n            labels.append('tspan')\r\n                .attr('x', 0)\r\n                .attr('dy', '1.2em')\r\n                .attr('opacity', 0.7)\r\n                .attr('font-size', 'var(--font-size-xs)')\r\n                .text(d => `${((d.data.value / total) * 100).toFixed(1)}%`);\r\n        }\r\n\r\n        // Animate labels\r\n        if (this.config.animated !== false) {\r\n            labels\r\n                .attr('opacity', 0)\r\n                .transition()\r\n                .duration(400)\r\n                .delay((_, i) => i * 100 + 800)\r\n                .attr('opacity', 1);\r\n\r\n            slices.selectAll('.label-line')\r\n                .attr('opacity', 0)\r\n                .transition()\r\n                .duration(400)\r\n                .delay((_, i) => i * 100 + 800)\r\n                .attr('opacity', 0.6);\r\n        }\r\n    }\r\n\r\n    private showTooltip(event: MouseEvent, dataPoint: ChartDataPoint, total: number, color: string): void {\r\n        const percentage = (dataPoint.value / total) * 100;\r\n\r\n        if (this.config.customTooltip) {\r\n            const customData = this.config.customTooltip({\r\n                label: dataPoint.label,\r\n                value: dataPoint.value,\r\n                percentage,\r\n                color\r\n            });\r\n            this.tooltipTitle = customData.title || '';\r\n            this.tooltipData = customData.items.map(item => ({\r\n                label: item.label,\r\n                value: item.value,\r\n                color: item.color\r\n            }));\r\n        } else {\r\n            this.tooltipTitle = dataPoint.label;\r\n            this.tooltipData = [\r\n                { label: 'Value', value: dataPoint.value.toLocaleString(), color },\r\n                { label: 'Percentage', value: `${percentage.toFixed(1)}%` }\r\n            ];\r\n        }\r\n\r\n        this.tooltipX = event.clientX;\r\n        this.tooltipY = event.clientY;\r\n        this.tooltipVisible = true;\r\n        this.cdr.detectChanges();\r\n    }\r\n\r\n    private hideTooltip(): void {\r\n        this.tooltipVisible = false;\r\n        this.cdr.detectChanges();\r\n    }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 13
                },
                {
                    "name": "cornerRadius",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "innerRadius",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "padAngle",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                },
                {
                    "name": "showLabels",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "showPercentages",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ScatterChartConfig",
            "id": "interface-ScatterChartConfig-bd8ea6092b23c3f0dc7215520a9f71c76106e2c3daccfebeece2e1becc02071b135a1d4faa38393216e0f9a0803e459d0699f568a0fac778b1ceacbba0748d82",
            "file": "src/components/charts/scatter/scatter.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface ScatterDataPoint {\r\n  x: number;\r\n  y: number;\r\n  size?: number;\r\n  label?: string;\r\n  color?: string;\r\n  category?: string;\r\n}\r\n\r\nexport interface ScatterChartConfig {\r\n  showGrid?: boolean;\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  minBubbleSize?: number;\r\n  maxBubbleSize?: number;\r\n  enableZoom?: boolean;\r\n  xAxisLabel?: string;\r\n  yAxisLabel?: string;\r\n  customTooltip?: (data: ScatterDataPoint) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-scatter',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './scatter.html',\r\n  styleUrl: './scatter.css',\r\n})\r\nexport class Scatter implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data: ScatterDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: ScatterChartConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n  private zoomBehavior!: d3.ZoomBehavior<SVGSVGElement, unknown>;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'scatter-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    if (this.config.enableZoom) {\r\n      this.setupZoom();\r\n    }\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    // Glass gradient for bubbles\r\n    const glassGradient = defs.append('radialGradient')\r\n      .attr('id', 'scatter-glass-gradient')\r\n      .attr('cx', '30%')\r\n      .attr('cy', '30%')\r\n      .attr('r', '70%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.9)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '50%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.5)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    // 3D shadow filter\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'scatter-3d-shadow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 4);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 4)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.3);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    // Glow effect\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'scatter-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 6)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private setupZoom(): void {\r\n    this.zoomBehavior = d3.zoom<SVGSVGElement, unknown>()\r\n      .scaleExtent([0.5, 5])\r\n      .on('zoom', (event) => {\r\n        this.chartGroup.attr('transform', event.transform);\r\n      });\r\n\r\n    this.svg.call(this.zoomBehavior as any);\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const xExtent = d3.extent(this.data, d => d.x) as [number, number];\r\n    const yExtent = d3.extent(this.data, d => d.y) as [number, number];\r\n\r\n    const xScale = d3.scaleLinear()\r\n      .domain([xExtent[0] * 0.9, xExtent[1] * 1.1])\r\n      .range([0, this.innerWidth])\r\n      .nice();\r\n\r\n    const yScale = d3.scaleLinear()\r\n      .domain([yExtent[0] * 0.9, yExtent[1] * 1.1])\r\n      .range([this.innerHeight, 0])\r\n      .nice();\r\n\r\n    const sizeExtent = d3.extent(this.data, d => d.size || 1) as [number, number];\r\n    const sizeScale = d3.scaleSqrt()\r\n      .domain(sizeExtent)\r\n      .range([this.config.minBubbleSize || 4, this.config.maxBubbleSize || 20]);\r\n\r\n    const categories = Array.from(new Set(this.data.map(d => d.category || 'default')));\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(categories)\r\n      .range(this.config.colors || [\r\n        '#0071e3', '#8e44ff', '#ff2d55', '#34c759',\r\n        '#ff9f0a', '#5ac8fa', '#af52de', '#ff3b30'\r\n      ]);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(xScale, yScale);\r\n    }\r\n\r\n    this.addAxes(xScale, yScale);\r\n    this.addBubbles(xScale, yScale, sizeScale, colorScale);\r\n  }\r\n\r\n  private addGrid(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    // Vertical grid lines\r\n    gridGroup.selectAll('.grid-line-x')\r\n      .data(xScale.ticks(10))\r\n      .join('line')\r\n      .attr('class', 'grid-line-x')\r\n      .attr('x1', d => xScale(d))\r\n      .attr('x2', d => xScale(d))\r\n      .attr('y1', 0)\r\n      .attr('y2', this.innerHeight)\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.05)')\r\n      .attr('stroke-width', 1);\r\n\r\n    // Horizontal grid lines\r\n    gridGroup.selectAll('.grid-line-y')\r\n      .data(yScale.ticks(10))\r\n      .join('line')\r\n      .attr('class', 'grid-line-y')\r\n      .attr('x1', 0)\r\n      .attr('x2', this.innerWidth)\r\n      .attr('y1', d => yScale(d))\r\n      .attr('y2', d => yScale(d))\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.05)')\r\n      .attr('stroke-width', 1);\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    // X axis\r\n    const xAxis = d3.axisBottom(xScale).ticks(10);\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(xAxis)\r\n      .selectAll('text')\r\n      .attr('fill', '#1d1d1f')\r\n      .attr('font-size', '13px');\r\n\r\n    // Y axis\r\n    const yAxis = d3.axisLeft(yScale).ticks(10);\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(yAxis)\r\n      .selectAll('text')\r\n      .attr('fill', '#1d1d1f')\r\n      .attr('font-size', '13px');\r\n\r\n    // Axis labels\r\n    if (this.config.xAxisLabel) {\r\n      this.chartGroup.append('text')\r\n        .attr('class', 'x-axis-label')\r\n        .attr('x', this.innerWidth / 2)\r\n        .attr('y', this.innerHeight + 45)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', '#1d1d1f')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .text(this.config.xAxisLabel);\r\n    }\r\n\r\n    if (this.config.yAxisLabel) {\r\n      this.chartGroup.append('text')\r\n        .attr('class', 'y-axis-label')\r\n        .attr('transform', 'rotate(-90)')\r\n        .attr('x', -this.innerHeight / 2)\r\n        .attr('y', -45)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', '#1d1d1f')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .text(this.config.yAxisLabel);\r\n    }\r\n\r\n    // Style axes\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.1)')\r\n      .attr('stroke-width', 2);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.1)');\r\n  }\r\n\r\n  private addBubbles(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    sizeScale: ReturnType<typeof d3.scaleSqrt<number, number>>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    const bubblesGroup = this.chartGroup.append('g').attr('class', 'bubbles');\r\n\r\n    const bubbles = bubblesGroup.selectAll('.bubble-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'bubble-group')\r\n      .attr('transform', d => `translate(${xScale(d.x)},${yScale(d.y)})`);\r\n\r\n    // Shadow circles\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble-shadow')\r\n      .attr('cx', 1)\r\n      .attr('cy', 2)\r\n      .attr('r', 0)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.2)')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Main bubbles with glass effect\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble')\r\n      .attr('r', 0)\r\n      .attr('fill', d => d.color || colorScale(d.category || 'default'))\r\n      .attr('fill-opacity', 0.8)\r\n      .style('filter', 'url(#scatter-3d-shadow)')\r\n      .style('cursor', 'pointer')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .ease(d3.easeElastic)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Glass overlay on bubbles\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble-glass')\r\n      .attr('r', 0)\r\n      .attr('fill', 'url(#scatter-glass-gradient)')\r\n      .attr('pointer-events', 'none')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Hover effects\r\n    bubbles\r\n      .on('mouseenter', (event, d) => {\r\n        d3.select(event.currentTarget).select('.bubble')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('r', sizeScale(d.size || 1) * 1.2)\r\n          .attr('fill-opacity', 1)\r\n          .style('filter', 'url(#scatter-glow) url(#scatter-3d-shadow)');\r\n\r\n        d3.select(event.currentTarget).select('.bubble-glass')\r\n          .transition()\r\n          .duration(200)\r\n          .attr('r', sizeScale(d.size || 1) * 1.2);\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event, d) => {\r\n        d3.select(event.currentTarget).select('.bubble')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('r', sizeScale(d.size || 1))\r\n          .attr('fill-opacity', 0.8)\r\n          .style('filter', 'url(#scatter-3d-shadow)');\r\n\r\n        d3.select(event.currentTarget).select('.bubble-glass')\r\n          .transition()\r\n          .duration(200)\r\n          .attr('r', sizeScale(d.size || 1));\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: ScatterDataPoint, colorScale: d3.ScaleOrdinal<string, string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip(dataPoint);\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataPoint.label || 'Data Point';\r\n      this.tooltipData = [\r\n        { label: 'X', value: dataPoint.x.toFixed(2), color: dataPoint.color || colorScale(dataPoint.category || 'default') },\r\n        { label: 'Y', value: dataPoint.y.toFixed(2) }\r\n      ];\r\n      if (dataPoint.size) {\r\n        this.tooltipData.push({ label: 'Size', value: dataPoint.size.toFixed(2) });\r\n      }\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 17
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 18
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 24
                },
                {
                    "name": "enableZoom",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 21
                },
                {
                    "name": "maxBubbleSize",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 20
                },
                {
                    "name": "minBubbleSize",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 19
                },
                {
                    "name": "showGrid",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 16
                },
                {
                    "name": "xAxisLabel",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 22
                },
                {
                    "name": "yAxisLabel",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 23
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "ScatterDataPoint",
            "id": "interface-ScatterDataPoint-bd8ea6092b23c3f0dc7215520a9f71c76106e2c3daccfebeece2e1becc02071b135a1d4faa38393216e0f9a0803e459d0699f568a0fac778b1ceacbba0748d82",
            "file": "src/components/charts/scatter/scatter.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface ScatterDataPoint {\r\n  x: number;\r\n  y: number;\r\n  size?: number;\r\n  label?: string;\r\n  color?: string;\r\n  category?: string;\r\n}\r\n\r\nexport interface ScatterChartConfig {\r\n  showGrid?: boolean;\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  minBubbleSize?: number;\r\n  maxBubbleSize?: number;\r\n  enableZoom?: boolean;\r\n  xAxisLabel?: string;\r\n  yAxisLabel?: string;\r\n  customTooltip?: (data: ScatterDataPoint) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-scatter',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './scatter.html',\r\n  styleUrl: './scatter.css',\r\n})\r\nexport class Scatter implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data: ScatterDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: ScatterChartConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n  private zoomBehavior!: d3.ZoomBehavior<SVGSVGElement, unknown>;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'scatter-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    if (this.config.enableZoom) {\r\n      this.setupZoom();\r\n    }\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    // Glass gradient for bubbles\r\n    const glassGradient = defs.append('radialGradient')\r\n      .attr('id', 'scatter-glass-gradient')\r\n      .attr('cx', '30%')\r\n      .attr('cy', '30%')\r\n      .attr('r', '70%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.9)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '50%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.5)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    // 3D shadow filter\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'scatter-3d-shadow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 4);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 4)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.3);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    // Glow effect\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'scatter-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 6)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private setupZoom(): void {\r\n    this.zoomBehavior = d3.zoom<SVGSVGElement, unknown>()\r\n      .scaleExtent([0.5, 5])\r\n      .on('zoom', (event) => {\r\n        this.chartGroup.attr('transform', event.transform);\r\n      });\r\n\r\n    this.svg.call(this.zoomBehavior as any);\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const xExtent = d3.extent(this.data, d => d.x) as [number, number];\r\n    const yExtent = d3.extent(this.data, d => d.y) as [number, number];\r\n\r\n    const xScale = d3.scaleLinear()\r\n      .domain([xExtent[0] * 0.9, xExtent[1] * 1.1])\r\n      .range([0, this.innerWidth])\r\n      .nice();\r\n\r\n    const yScale = d3.scaleLinear()\r\n      .domain([yExtent[0] * 0.9, yExtent[1] * 1.1])\r\n      .range([this.innerHeight, 0])\r\n      .nice();\r\n\r\n    const sizeExtent = d3.extent(this.data, d => d.size || 1) as [number, number];\r\n    const sizeScale = d3.scaleSqrt()\r\n      .domain(sizeExtent)\r\n      .range([this.config.minBubbleSize || 4, this.config.maxBubbleSize || 20]);\r\n\r\n    const categories = Array.from(new Set(this.data.map(d => d.category || 'default')));\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(categories)\r\n      .range(this.config.colors || [\r\n        '#0071e3', '#8e44ff', '#ff2d55', '#34c759',\r\n        '#ff9f0a', '#5ac8fa', '#af52de', '#ff3b30'\r\n      ]);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(xScale, yScale);\r\n    }\r\n\r\n    this.addAxes(xScale, yScale);\r\n    this.addBubbles(xScale, yScale, sizeScale, colorScale);\r\n  }\r\n\r\n  private addGrid(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    // Vertical grid lines\r\n    gridGroup.selectAll('.grid-line-x')\r\n      .data(xScale.ticks(10))\r\n      .join('line')\r\n      .attr('class', 'grid-line-x')\r\n      .attr('x1', d => xScale(d))\r\n      .attr('x2', d => xScale(d))\r\n      .attr('y1', 0)\r\n      .attr('y2', this.innerHeight)\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.05)')\r\n      .attr('stroke-width', 1);\r\n\r\n    // Horizontal grid lines\r\n    gridGroup.selectAll('.grid-line-y')\r\n      .data(yScale.ticks(10))\r\n      .join('line')\r\n      .attr('class', 'grid-line-y')\r\n      .attr('x1', 0)\r\n      .attr('x2', this.innerWidth)\r\n      .attr('y1', d => yScale(d))\r\n      .attr('y2', d => yScale(d))\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.05)')\r\n      .attr('stroke-width', 1);\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    // X axis\r\n    const xAxis = d3.axisBottom(xScale).ticks(10);\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(xAxis)\r\n      .selectAll('text')\r\n      .attr('fill', '#1d1d1f')\r\n      .attr('font-size', '13px');\r\n\r\n    // Y axis\r\n    const yAxis = d3.axisLeft(yScale).ticks(10);\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(yAxis)\r\n      .selectAll('text')\r\n      .attr('fill', '#1d1d1f')\r\n      .attr('font-size', '13px');\r\n\r\n    // Axis labels\r\n    if (this.config.xAxisLabel) {\r\n      this.chartGroup.append('text')\r\n        .attr('class', 'x-axis-label')\r\n        .attr('x', this.innerWidth / 2)\r\n        .attr('y', this.innerHeight + 45)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', '#1d1d1f')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .text(this.config.xAxisLabel);\r\n    }\r\n\r\n    if (this.config.yAxisLabel) {\r\n      this.chartGroup.append('text')\r\n        .attr('class', 'y-axis-label')\r\n        .attr('transform', 'rotate(-90)')\r\n        .attr('x', -this.innerHeight / 2)\r\n        .attr('y', -45)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', '#1d1d1f')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .text(this.config.yAxisLabel);\r\n    }\r\n\r\n    // Style axes\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.1)')\r\n      .attr('stroke-width', 2);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.1)');\r\n  }\r\n\r\n  private addBubbles(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    sizeScale: ReturnType<typeof d3.scaleSqrt<number, number>>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    const bubblesGroup = this.chartGroup.append('g').attr('class', 'bubbles');\r\n\r\n    const bubbles = bubblesGroup.selectAll('.bubble-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'bubble-group')\r\n      .attr('transform', d => `translate(${xScale(d.x)},${yScale(d.y)})`);\r\n\r\n    // Shadow circles\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble-shadow')\r\n      .attr('cx', 1)\r\n      .attr('cy', 2)\r\n      .attr('r', 0)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.2)')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Main bubbles with glass effect\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble')\r\n      .attr('r', 0)\r\n      .attr('fill', d => d.color || colorScale(d.category || 'default'))\r\n      .attr('fill-opacity', 0.8)\r\n      .style('filter', 'url(#scatter-3d-shadow)')\r\n      .style('cursor', 'pointer')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .ease(d3.easeElastic)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Glass overlay on bubbles\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble-glass')\r\n      .attr('r', 0)\r\n      .attr('fill', 'url(#scatter-glass-gradient)')\r\n      .attr('pointer-events', 'none')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Hover effects\r\n    bubbles\r\n      .on('mouseenter', (event, d) => {\r\n        d3.select(event.currentTarget).select('.bubble')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('r', sizeScale(d.size || 1) * 1.2)\r\n          .attr('fill-opacity', 1)\r\n          .style('filter', 'url(#scatter-glow) url(#scatter-3d-shadow)');\r\n\r\n        d3.select(event.currentTarget).select('.bubble-glass')\r\n          .transition()\r\n          .duration(200)\r\n          .attr('r', sizeScale(d.size || 1) * 1.2);\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event, d) => {\r\n        d3.select(event.currentTarget).select('.bubble')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('r', sizeScale(d.size || 1))\r\n          .attr('fill-opacity', 0.8)\r\n          .style('filter', 'url(#scatter-3d-shadow)');\r\n\r\n        d3.select(event.currentTarget).select('.bubble-glass')\r\n          .transition()\r\n          .duration(200)\r\n          .attr('r', sizeScale(d.size || 1));\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: ScatterDataPoint, colorScale: d3.ScaleOrdinal<string, string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip(dataPoint);\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataPoint.label || 'Data Point';\r\n      this.tooltipData = [\r\n        { label: 'X', value: dataPoint.x.toFixed(2), color: dataPoint.color || colorScale(dataPoint.category || 'default') },\r\n        { label: 'Y', value: dataPoint.y.toFixed(2) }\r\n      ];\r\n      if (dataPoint.size) {\r\n        this.tooltipData.push({ label: 'Size', value: dataPoint.size.toFixed(2) });\r\n      }\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "category",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "size",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "x",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "y",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 8
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "TimeSeriesDataPoint",
            "id": "interface-TimeSeriesDataPoint-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 13
                },
                {
                    "name": "date",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "Date",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 11
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "TooltipConfig",
            "id": "interface-TooltipConfig-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "customContent",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 71
                },
                {
                    "name": "enabled",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 68
                },
                {
                    "name": "format",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 69
                },
                {
                    "name": "position",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"auto\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 70
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "TooltipData",
            "id": "interface-TooltipData-7ce316766233f9464f58f158c4431400a08e23a21f6b37827cacb81ad2a53aab8b7dc9fe4aa9d739bca2fd8efafe20b7f8177dda5867b615f7f5ea70ac99e300",
            "file": "src/components/base/tooltip/tooltip.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport interface TooltipData {\r\n    label: string;\r\n    value: string | number;\r\n    color?: string;\r\n}\r\n\r\n@Component({\r\n    selector: 'app-tooltip',\r\n    standalone: true,\r\n    imports: [CommonModule],\r\n    templateUrl: './tooltip.html',\r\n    styleUrl: './tooltip.css',\r\n})\r\nexport class Tooltip implements OnChanges {\r\n    @Input() data: TooltipData[] = [];\r\n    @Input() x: number = 0;\r\n    @Input() y: number = 0;\r\n    @Input() visible: boolean = false;\r\n    @Input() title?: string;\r\n\r\n    position = { x: 0, y: 0 };\r\n    private offset = { x: 15, y: 15 };\r\n\r\n    constructor(\r\n        private elementRef: ElementRef,\r\n        private cdr: ChangeDetectorRef,\r\n        themeService: ThemeService\r\n    ) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['x'] || changes['y'] || changes['visible']) {\r\n            setTimeout(() => this.updatePosition(), 0);\r\n        }\r\n    }\r\n\r\n    private updatePosition(): void {\r\n        if (!this.visible) {\r\n            this.position = { x: this.x + this.offset.x, y: this.y + this.offset.y };\r\n            return;\r\n        }\r\n\r\n        const element = this.elementRef.nativeElement.querySelector('.tooltip-container');\r\n\r\n        if (!element) {\r\n            this.position = { x: this.x + this.offset.x, y: this.y + this.offset.y };\r\n            return;\r\n        }\r\n\r\n        const tooltipWidth = element.offsetWidth || 200;\r\n        const tooltipHeight = element.offsetHeight || 100;\r\n        const windowWidth = window.innerWidth;\r\n        const windowHeight = window.innerHeight;\r\n        const margin = 10;\r\n\r\n        let x = this.x + this.offset.x;\r\n        let y = this.y + this.offset.y;\r\n\r\n        if (x + tooltipWidth + margin > windowWidth) {\r\n            x = this.x - tooltipWidth - this.offset.x;\r\n        }\r\n\r\n        if (x < margin) {\r\n            x = margin;\r\n        }\r\n\r\n        if (y + tooltipHeight + margin > windowHeight) {\r\n            y = this.y - tooltipHeight - this.offset.y;\r\n        }\r\n\r\n        if (y < margin) {\r\n            y = margin;\r\n        }\r\n\r\n        this.position = { x, y };\r\n    }\r\n\r\n    @HostListener('window:resize')\r\n    onResize(): void {\r\n        if (this.visible) {\r\n            this.updatePosition();\r\n        }\r\n    }\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 6
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string | number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 7
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "TreemapConfig",
            "id": "interface-TreemapConfig-d262f43fbddd609dad5bc7a71cb6b0713a0c825ee5aa8323438607e918322887a4b6b626edf5c65870436917abb3e1157a6d2f353fdbe527aa5074f0450c4886",
            "file": "src/components/charts/treemap/treemap.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface TreemapDataNode {\r\n  name: string;\r\n  value?: number;\r\n  children?: TreemapDataNode[];\r\n  color?: string;\r\n}\r\n\r\nexport interface TreemapConfig {\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  paddingInner?: number;\r\n  paddingOuter?: number;\r\n  cornerRadius?: number;\r\n  showLabels?: boolean;\r\n  customTooltip?: (data: TreemapDataNode) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-treemap',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './treemap.html',\r\n  styleUrl: './treemap.css',\r\n})\r\nexport class Treemap implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data!: TreemapDataNode;\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: TreemapConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'treemap-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group');\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'treemap-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '100%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.7)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '50%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.3)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.05)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'treemap-shadow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 4);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 3)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.25);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'treemap-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 8)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const cornerRadius = this.config.cornerRadius ?? 8;\r\n    const paddingInner = this.config.paddingInner ?? 2;\r\n    const paddingOuter = this.config.paddingOuter ?? 4;\r\n\r\n    const root = d3.hierarchy(this.data)\r\n      .sum(d => d.value || 0)\r\n      .sort((a, b) => (b.value || 0) - (a.value || 0));\r\n\r\n    const treemapLayout = d3.treemap<TreemapDataNode>()\r\n      .size([this.width, this.height])\r\n      .paddingInner(paddingInner)\r\n      .paddingOuter(paddingOuter)\r\n      .round(true);\r\n\r\n    treemapLayout(root as any);\r\n\r\n    const leaves = root.leaves() as d3.HierarchyRectangularNode<TreemapDataNode>[];\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(leaves.map((_, i) => i.toString()))\r\n      .range(this.config.colors || [\r\n        '#0071e3', '#8e44ff', '#ff2d55', '#34c759',\r\n        '#ff9f0a', '#5ac8fa', '#af52de', '#ff3b30'\r\n      ]);\r\n\r\n    const cells = this.chartGroup\r\n      .selectAll('.cell')\r\n      .data(leaves)\r\n      .join('g')\r\n      .attr('class', 'cell')\r\n      .attr('transform', d => `translate(${d.x0},${d.y0})`);\r\n\r\n    // Shadow rectangles\r\n    cells.append('rect')\r\n      .attr('class', 'cell-shadow')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('x', 2)\r\n      .attr('y', 2)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.15)')\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Main rectangles\r\n    cells.append('rect')\r\n      .attr('class', 'cell-rect')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('fill', (d, i) => d.data.color || colorScale(i.toString()))\r\n      .attr('fill-opacity', 0.85)\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .style('filter', 'url(#treemap-shadow)')\r\n      .style('cursor', 'pointer')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .ease(d3.easeCubicOut)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Glass overlay\r\n    cells.append('rect')\r\n      .attr('class', 'cell-glass')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('fill', 'url(#treemap-glass-gradient)')\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .attr('pointer-events', 'none')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Labels\r\n    if (this.config.showLabels !== false) {\r\n      cells.append('text')\r\n        .attr('class', 'cell-label')\r\n        .attr('x', d => (d.x1 - d.x0) / 2)\r\n        .attr('y', d => (d.y1 - d.y0) / 2)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('dominant-baseline', 'middle')\r\n        .attr('fill', 'white')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .attr('pointer-events', 'none')\r\n        .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.4)')\r\n        .attr('opacity', 0)\r\n        .text(d => {\r\n          const width = d.x1 - d.x0;\r\n          const height = d.y1 - d.y0;\r\n          if (width > 60 && height > 30) {\r\n            return d.data.name;\r\n          }\r\n          return '';\r\n        })\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 300)\r\n        .attr('opacity', 1);\r\n\r\n      // Value labels\r\n      cells.append('text')\r\n        .attr('class', 'cell-value')\r\n        .attr('x', d => (d.x1 - d.x0) / 2)\r\n        .attr('y', d => (d.y1 - d.y0) / 2 + 18)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', 'rgba(255, 255, 255, 0.9)')\r\n        .attr('font-size', '12px')\r\n        .attr('pointer-events', 'none')\r\n        .style('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.3)')\r\n        .attr('opacity', 0)\r\n        .text(d => {\r\n          const width = d.x1 - d.x0;\r\n          const height = d.y1 - d.y0;\r\n          if (width > 80 && height > 50 && d.data.value) {\r\n            return d.data.value.toLocaleString();\r\n          }\r\n          return '';\r\n        })\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 400)\r\n        .attr('opacity', 1);\r\n    }\r\n\r\n    // Hover effects\r\n    cells\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget).select('.cell-rect')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('fill-opacity', 1)\r\n          .style('filter', 'url(#treemap-glow) url(#treemap-shadow)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d.data);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget).select('.cell-rect')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('fill-opacity', 0.85)\r\n          .style('filter', 'url(#treemap-shadow)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataNode: TreemapDataNode): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip(dataNode);\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataNode.name;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: (dataNode.value || 0).toLocaleString() }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 15
                },
                {
                    "name": "cornerRadius",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 18
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 20
                },
                {
                    "name": "paddingInner",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 16
                },
                {
                    "name": "paddingOuter",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 17
                },
                {
                    "name": "showLabels",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 19
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "TreemapDataNode",
            "id": "interface-TreemapDataNode-d262f43fbddd609dad5bc7a71cb6b0713a0c825ee5aa8323438607e918322887a4b6b626edf5c65870436917abb3e1157a6d2f353fdbe527aa5074f0450c4886",
            "file": "src/components/charts/treemap/treemap.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface TreemapDataNode {\r\n  name: string;\r\n  value?: number;\r\n  children?: TreemapDataNode[];\r\n  color?: string;\r\n}\r\n\r\nexport interface TreemapConfig {\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  paddingInner?: number;\r\n  paddingOuter?: number;\r\n  cornerRadius?: number;\r\n  showLabels?: boolean;\r\n  customTooltip?: (data: TreemapDataNode) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-treemap',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './treemap.html',\r\n  styleUrl: './treemap.css',\r\n})\r\nexport class Treemap implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data!: TreemapDataNode;\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: TreemapConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'treemap-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group');\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'treemap-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '100%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.7)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '50%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.3)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.05)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'treemap-shadow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 4);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 3)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.25);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'treemap-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 8)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const cornerRadius = this.config.cornerRadius ?? 8;\r\n    const paddingInner = this.config.paddingInner ?? 2;\r\n    const paddingOuter = this.config.paddingOuter ?? 4;\r\n\r\n    const root = d3.hierarchy(this.data)\r\n      .sum(d => d.value || 0)\r\n      .sort((a, b) => (b.value || 0) - (a.value || 0));\r\n\r\n    const treemapLayout = d3.treemap<TreemapDataNode>()\r\n      .size([this.width, this.height])\r\n      .paddingInner(paddingInner)\r\n      .paddingOuter(paddingOuter)\r\n      .round(true);\r\n\r\n    treemapLayout(root as any);\r\n\r\n    const leaves = root.leaves() as d3.HierarchyRectangularNode<TreemapDataNode>[];\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(leaves.map((_, i) => i.toString()))\r\n      .range(this.config.colors || [\r\n        '#0071e3', '#8e44ff', '#ff2d55', '#34c759',\r\n        '#ff9f0a', '#5ac8fa', '#af52de', '#ff3b30'\r\n      ]);\r\n\r\n    const cells = this.chartGroup\r\n      .selectAll('.cell')\r\n      .data(leaves)\r\n      .join('g')\r\n      .attr('class', 'cell')\r\n      .attr('transform', d => `translate(${d.x0},${d.y0})`);\r\n\r\n    // Shadow rectangles\r\n    cells.append('rect')\r\n      .attr('class', 'cell-shadow')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('x', 2)\r\n      .attr('y', 2)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.15)')\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Main rectangles\r\n    cells.append('rect')\r\n      .attr('class', 'cell-rect')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('fill', (d, i) => d.data.color || colorScale(i.toString()))\r\n      .attr('fill-opacity', 0.85)\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .style('filter', 'url(#treemap-shadow)')\r\n      .style('cursor', 'pointer')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .ease(d3.easeCubicOut)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Glass overlay\r\n    cells.append('rect')\r\n      .attr('class', 'cell-glass')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('fill', 'url(#treemap-glass-gradient)')\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .attr('pointer-events', 'none')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Labels\r\n    if (this.config.showLabels !== false) {\r\n      cells.append('text')\r\n        .attr('class', 'cell-label')\r\n        .attr('x', d => (d.x1 - d.x0) / 2)\r\n        .attr('y', d => (d.y1 - d.y0) / 2)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('dominant-baseline', 'middle')\r\n        .attr('fill', 'white')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .attr('pointer-events', 'none')\r\n        .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.4)')\r\n        .attr('opacity', 0)\r\n        .text(d => {\r\n          const width = d.x1 - d.x0;\r\n          const height = d.y1 - d.y0;\r\n          if (width > 60 && height > 30) {\r\n            return d.data.name;\r\n          }\r\n          return '';\r\n        })\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 300)\r\n        .attr('opacity', 1);\r\n\r\n      // Value labels\r\n      cells.append('text')\r\n        .attr('class', 'cell-value')\r\n        .attr('x', d => (d.x1 - d.x0) / 2)\r\n        .attr('y', d => (d.y1 - d.y0) / 2 + 18)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', 'rgba(255, 255, 255, 0.9)')\r\n        .attr('font-size', '12px')\r\n        .attr('pointer-events', 'none')\r\n        .style('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.3)')\r\n        .attr('opacity', 0)\r\n        .text(d => {\r\n          const width = d.x1 - d.x0;\r\n          const height = d.y1 - d.y0;\r\n          if (width > 80 && height > 50 && d.data.value) {\r\n            return d.data.value.toLocaleString();\r\n          }\r\n          return '';\r\n        })\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 400)\r\n        .attr('opacity', 1);\r\n    }\r\n\r\n    // Hover effects\r\n    cells\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget).select('.cell-rect')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('fill-opacity', 1)\r\n          .style('filter', 'url(#treemap-glow) url(#treemap-shadow)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d.data);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget).select('.cell-rect')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('fill-opacity', 0.85)\r\n          .style('filter', 'url(#treemap-shadow)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataNode: TreemapDataNode): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip(dataNode);\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataNode.name;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: (dataNode.value || 0).toLocaleString() }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "properties": [
                {
                    "name": "children",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TreemapDataNode[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "name",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 7
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "WordCloudConfig",
            "id": "interface-WordCloudConfig-573f7d1c185735e01e6ba12fe9de0161ce2fe7b85633ef143a864721d791c34f66e9e6ca6e681892009c3cf7a54d85af45c9dd19a40bfd7e14e784146dfa9808",
            "file": "src/components/charts/wordcloud/wordcloud.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport cloud from 'd3-cloud';\r\nimport { WordCloudDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface WordCloudConfig {\r\n    animated?: boolean;\r\n    fontFamily?: string;\r\n    minFontSize?: number;\r\n    maxFontSize?: number;\r\n    rotation?: number | (() => number);\r\n    padding?: number;\r\n    colors?: string[];\r\n    spiral?: 'archimedean' | 'rectangular';\r\n    customTooltip?: (data: { text: string; value: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n    selector: 'app-wordcloud',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './wordcloud.html',\r\n    styleUrl: './wordcloud.css',\r\n})\r\nexport class WordCloud implements OnInit, OnChanges {\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: WordCloudDataPoint[] = [];\r\n    @Input() width: number = 800;\r\n    @Input() height: number = 600;\r\n    @Input() config: WordCloudConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'wordcloud-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.width / 2},${this.height / 2})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Text shadow filter\r\n        const shadow = defs.append('filter')\r\n            .attr('id', 'word-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 2);\r\n\r\n        shadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 2);\r\n\r\n        shadow.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const feMerge = shadow.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Glow filter\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'word-glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 3)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        if (!this.data || this.data.length === 0) return;\r\n\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        // Create font size scale\r\n        const values = this.data.map(d => d.value);\r\n        const fontScale = d3.scaleLinear()\r\n            .domain([Math.min(...values), Math.max(...values)])\r\n            .range([this.config.minFontSize || 16, this.config.maxFontSize || 80]);\r\n\r\n        // Color scale\r\n        const colorScale = d3.scaleOrdinal<string>()\r\n            .domain(this.data.map(d => d.text))\r\n            .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4', '#f97316']);\r\n\r\n        // Create layout\r\n        const layout = cloud()\r\n            .size([this.width, this.height])\r\n            .words(this.data.map(d => ({\r\n                text: d.text,\r\n                size: fontScale(d.value),\r\n                color: d.color || colorScale(d.text),\r\n                value: d.value\r\n            })))\r\n            .padding(this.config.padding ?? 5)\r\n            .rotate(this.config.rotation ?? (() => (Math.random() > 0.5 ? 0 : 90)))\r\n            .font(this.config.fontFamily || 'var(--font-family)')\r\n            .fontSize((d: any) => d.size)\r\n            .spiral(this.config.spiral || 'archimedean')\r\n            .on('end', (words: any[]) => {\r\n                this.renderWords(words);\r\n            });\r\n\r\n        layout.start();\r\n    }\r\n\r\n    private renderWords(words: any[]): void {\r\n        const wordGroups = this.chartGroup.selectAll('.word-group')\r\n            .data(words)\r\n            .join('g')\r\n            .attr('class', 'word-group')\r\n            .attr('transform', d => `translate(${d.x},${d.y})`);\r\n\r\n        // Add text shadow\r\n        wordGroups.append('text')\r\n            .attr('class', 'word-shadow')\r\n            .attr('text-anchor', 'middle')\r\n            .attr('transform', d => `rotate(${d.rotate}) translate(1, 1)`)\r\n            .attr('font-size', d => `${d.size}px`)\r\n            .attr('font-family', this.config.fontFamily || 'var(--font-family)')\r\n            .attr('font-weight', '700')\r\n            .attr('fill', 'rgba(0, 0, 0, 0.2)')\r\n            .text(d => d.text);\r\n\r\n        // Add main text\r\n        const wordElements = wordGroups.append('text')\r\n            .attr('class', 'word')\r\n            .attr('text-anchor', 'middle')\r\n            .attr('transform', (d: any) => `rotate(${d.rotate})`)\r\n            .attr('font-size', (d: any) => `${d.size}px`)\r\n            .attr('font-family', this.config.fontFamily || 'var(--font-family)')\r\n            .attr('font-weight', '700')\r\n            .attr('fill', (d: any) => d.color)\r\n            .style('filter', 'url(#word-shadow)')\r\n            .text((d: any) => d.text);\r\n\r\n        // Animate words\r\n        if (this.config.animated !== false) {\r\n            wordElements\r\n                .attr('opacity', 0)\r\n                .attr('transform', (d: any) => `rotate(${d.rotate}) scale(0)`)\r\n                .transition()\r\n                .duration(800)\r\n                .delay((_: any, i: number) => i * 50)\r\n                .ease(d3.easeBackOut)\r\n                .attr('opacity', 1)\r\n                .attr('transform', (d: any) => `rotate(${d.rotate}) scale(1)`);\r\n        }\r\n\r\n        // Add hover effects\r\n        wordElements\r\n            .on('mouseenter', function (_event: any, d: any) {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('transform', `rotate(${d.rotate}) scale(1.2)`)\r\n                    .style('filter', 'url(#word-glow) url(#word-shadow)')\r\n                    .attr('cursor', 'pointer');\r\n            })\r\n            .on('mouseleave', function (_event: any, d: any) {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('transform', `rotate(${d.rotate}) scale(1)`)\r\n                    .style('filter', 'url(#word-shadow)');\r\n            });\r\n\r\n        // Add tooltips on hover\r\n        wordElements\r\n            .append('title')\r\n            .text((d: any) => `${d.text}: ${d.value}`);\r\n    }\r\n}\r\n",
            "properties": [
                {
                    "name": "animated",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 8
                },
                {
                    "name": "colors",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string[]",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 14
                },
                {
                    "name": "customTooltip",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "function",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 16
                },
                {
                    "name": "fontFamily",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 9
                },
                {
                    "name": "maxFontSize",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                },
                {
                    "name": "minFontSize",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 10
                },
                {
                    "name": "padding",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 13
                },
                {
                    "name": "rotation",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number | unknown",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 12
                },
                {
                    "name": "spiral",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "\"archimedean\" | \"rectangular\"",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 15
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        },
        {
            "name": "WordCloudDataPoint",
            "id": "interface-WordCloudDataPoint-d4b43f400b0456ad093215f201db32513394335cf3344b298e3b296a3abf4797a75436e2f2f348563376533dedfcff38a56327a8645f75ad9b76e5994330dfc6",
            "file": "src/types/chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "interface",
            "sourceCode": "export interface ChartDataPoint {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    metadata?: Record<string, any>;\r\n}\r\n\r\nexport interface TimeSeriesDataPoint {\r\n    date: Date;\r\n    value: number;\r\n    label?: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface MultiSeriesDataPoint {\r\n    label: string;\r\n    values: Record<string, number>;\r\n}\r\n\r\nexport interface HeatmapDataPoint {\r\n    x: string | number;\r\n    y: string | number;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface WordCloudDataPoint {\r\n    text: string;\r\n    value: number;\r\n    color?: string;\r\n}\r\n\r\nexport interface GaugeData {\r\n    value: number;\r\n    min: number;\r\n    max: number;\r\n    label?: string;\r\n    thresholds?: GaugeThreshold[];\r\n}\r\n\r\nexport interface GaugeThreshold {\r\n    value: number;\r\n    color: string;\r\n    label?: string;\r\n}\r\n\r\nexport interface ChartConfig {\r\n    title?: string;\r\n    subtitle?: string;\r\n    showLegend?: boolean;\r\n    showGrid?: boolean;\r\n    showTooltip?: boolean;\r\n    animated?: boolean;\r\n    responsive?: boolean;\r\n    colors?: string[];\r\n}\r\n\r\nexport interface AxisConfig {\r\n    label?: string;\r\n    showGrid?: boolean;\r\n    ticks?: number;\r\n    tickFormat?: (value: any) => string;\r\n    domain?: [number, number];\r\n}\r\n\r\nexport interface TooltipConfig {\r\n    enabled?: boolean;\r\n    format?: (data: any) => string;\r\n    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\r\n    customContent?: (data: any) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\nexport interface LegendConfig {\r\n    position?: 'top' | 'bottom' | 'left' | 'right';\r\n    orientation?: 'horizontal' | 'vertical';\r\n    interactive?: boolean;\r\n}\r\n\r\nexport interface ChartEvent<T = any> {\r\n    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';\r\n    data: T;\r\n    originalEvent: MouseEvent;\r\n}\r\n",
            "properties": [
                {
                    "name": "color",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 31
                },
                {
                    "name": "text",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 29
                },
                {
                    "name": "value",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 30
                }
            ],
            "indexSignatures": [],
            "kind": 172,
            "methods": [],
            "extends": []
        }
    ],
    "injectables": [
        {
            "name": "ThemeService",
            "id": "injectable-ThemeService-43198d788949101e65a6f8f1a6acd5267041618dcddf84a6defc2d8b52f4ab89e1b01f55a266cab5cefdd551682d9b2fbcdcccc2c9939ed1d957ee1667dabe93",
            "file": "src/services/theme.ts",
            "properties": [
                {
                    "name": "http",
                    "defaultValue": "inject(HttpClient)",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 10,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "theme",
                    "defaultValue": "undefined",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "Theme",
                    "indexKey": "",
                    "optional": true,
                    "description": "",
                    "line": 11
                }
            ],
            "methods": [
                {
                    "name": "getTheme",
                    "args": [],
                    "optional": false,
                    "returnType": "Theme | undefined",
                    "typeParameters": [],
                    "line": 49,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "loadAndSetTheme",
                    "args": [
                        {
                            "name": "path",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 57,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "path",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "loadTheme",
                    "args": [
                        {
                            "name": "path",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "Observable<Theme>",
                    "typeParameters": [],
                    "line": 53,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "path",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "setCSSVariables",
                    "args": [
                        {
                            "name": "theme",
                            "type": "Theme",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 13,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "theme",
                            "type": "Theme",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "setTheme",
                    "args": [
                        {
                            "name": "theme",
                            "type": "Theme",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 44,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "theme",
                            "type": "Theme",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "description": "",
            "rawdescription": "\n",
            "sourceCode": "import { HttpClient } from '@angular/common/http';\r\nimport { Injectable, inject } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport { Theme } from '../types/theme';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class ThemeService {\r\n  private http = inject(HttpClient);\r\n  theme?: Theme = undefined;\r\n\r\n  setCSSVariables(theme: Theme) {\r\n    const root = document.documentElement;\r\n\r\n    Object.entries(theme.colors).forEach(([key, value]) => {\r\n      const cssValue = Array.isArray(value) ? value.join(', ') : value;\r\n      root.style.setProperty(`--color-${key}`, cssValue);\r\n    });\r\n\r\n    Object.entries(theme.spacing).forEach(([key, value]) => {\r\n      root.style.setProperty(`--spacing-${key}`, `${value}px`);\r\n    });\r\n\r\n    root.style.setProperty(`--font-family`, theme.fonts.family);\r\n    Object.entries(theme.fonts.size).forEach(([key, value]) => {\r\n      root.style.setProperty(`--font-size-${key}`, `${value}px`);\r\n    });\r\n\r\n    root.style.setProperty(`--border-radius`, theme.borders.radius);\r\n    root.style.setProperty(`--border-width`, theme.borders.width);\r\n    root.style.setProperty(`--border-style`, theme.borders.style);\r\n\r\n    root.style.setProperty(`--animation-duration`, `${theme.animations.duration}ms`);\r\n    root.style.setProperty(`--animation-easing`, theme.animations.easing);\r\n\r\n    if (theme.effects) {\r\n      Object.entries(theme.effects).forEach(([key, value]) => {\r\n        root.style.setProperty(`--effect-${key}`, value);\r\n      });\r\n    }\r\n  }\r\n\r\n  setTheme(theme: Theme) {\r\n    this.theme = theme;\r\n    this.setCSSVariables(theme);\r\n  }\r\n\r\n  getTheme(): Theme | undefined {\r\n    return this.theme;\r\n  }\r\n\r\n  loadTheme(path: string): Observable<Theme> {\r\n    return this.http.get<Theme>(path);\r\n  }\r\n\r\n  loadAndSetTheme(path: string): void {\r\n    this.loadTheme(path).subscribe((theme) => {\r\n      this.setTheme(theme);\r\n    });\r\n  }\r\n\r\n}\r\n",
            "extends": [],
            "type": "injectable"
        }
    ],
    "guards": [],
    "interceptors": [],
    "classes": [
        {
            "name": "BaseChart",
            "id": "class-BaseChart-1f81e409c4dc3f4247ae493a756a9c6a389758cca5da56b6553200399daa884812c1d0353abe041b386028df8c0ea0a02701ca4b3dec0ae6a2932fc9473793cf",
            "file": "src/components/base/base-chart.ts",
            "deprecated": false,
            "deprecationMessage": "",
            "type": "class",
            "sourceCode": "import { ElementRef, inject } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../services/theme';\r\n\r\nexport interface ChartMargin {\r\n    top: number;\r\n    right: number;\r\n    bottom: number;\r\n    left: number;\r\n}\r\n\r\nexport interface ChartDimensions {\r\n    width: number;\r\n    height: number;\r\n    innerWidth: number;\r\n    innerHeight: number;\r\n}\r\n\r\nexport abstract class BaseChart {\r\n    protected themeService = inject(ThemeService);\r\n    protected svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    protected chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    protected margin: ChartMargin = {\r\n        top: 40,\r\n        right: 40,\r\n        bottom: 60,\r\n        left: 60,\r\n    };\r\n\r\n    protected dimensions: ChartDimensions = {\r\n        width: 800,\r\n        height: 500,\r\n        innerWidth: 0,\r\n        innerHeight: 0,\r\n    };\r\n\r\n    protected animationDuration = 300;\r\n\r\n    constructor(protected container: ElementRef, themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    protected initializeSVG(): void {\r\n        const containerElement = this.container.nativeElement;\r\n\r\n        d3.select(containerElement).select('svg').remove();\r\n\r\n        this.svg = d3.select(containerElement)\r\n            .append('svg')\r\n            .attr('width', this.dimensions.width)\r\n            .attr('height', this.dimensions.height)\r\n            .attr('class', 'chart-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg.append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n        this.calculateInnerDimensions();\r\n    }\r\n\r\n    protected calculateInnerDimensions(): void {\r\n        this.dimensions.innerWidth = this.dimensions.width - this.margin.left - this.margin.right;\r\n        this.dimensions.innerHeight = this.dimensions.height - this.margin.top - this.margin.bottom;\r\n    }\r\n\r\n    protected addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Enhanced Glass Gradient with multiple layers\r\n        const glassGradient = defs.append('linearGradient')\r\n            .attr('id', 'glass-gradient')\r\n            .attr('x1', '0%')\r\n            .attr('y1', '0%')\r\n            .attr('x2', '0%')\r\n            .attr('y2', '100%');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.7)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '50%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.3)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // Radial Glass Effect\r\n        const radialGlass = defs.append('radialGradient')\r\n            .attr('id', 'radial-glass')\r\n            .attr('cx', '50%')\r\n            .attr('cy', '50%')\r\n            .attr('r', '50%');\r\n\r\n        radialGlass.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.8)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        radialGlass.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.2)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // Enhanced 3D Shadow Filter\r\n        const shadow3D = defs.append('filter')\r\n            .attr('id', 'shadow-3d')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow3D.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 5);\r\n\r\n        shadow3D.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 6)\r\n            .attr('result', 'offsetblur');\r\n\r\n        shadow3D.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.25);\r\n\r\n        const feMerge = shadow3D.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Stronger 3D Shadow\r\n        const shadowStrong = defs.append('filter')\r\n            .attr('id', 'shadow-3d-strong')\r\n            .attr('x', '-100%')\r\n            .attr('y', '-100%')\r\n            .attr('width', '300%')\r\n            .attr('height', '300%');\r\n\r\n        shadowStrong.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 8);\r\n\r\n        shadowStrong.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 10)\r\n            .attr('result', 'offsetblur');\r\n\r\n        shadowStrong.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const strongMerge = shadowStrong.append('feMerge');\r\n        strongMerge.append('feMergeNode');\r\n        strongMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Glow Effect\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 4)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Strong Glow\r\n        const glowStrong = defs.append('filter')\r\n            .attr('id', 'glow-strong')\r\n            .attr('x', '-100%')\r\n            .attr('y', '-100%')\r\n            .attr('width', '300%')\r\n            .attr('height', '300%');\r\n\r\n        glowStrong.append('feGaussianBlur')\r\n            .attr('stdDeviation', 8)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowStrongMerge = glowStrong.append('feMerge');\r\n        glowStrongMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowStrongMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Inner Shadow for depth\r\n        const innerShadow = defs.append('filter')\r\n            .attr('id', 'inner-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        innerShadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 3);\r\n\r\n        innerShadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 2);\r\n\r\n        innerShadow.append('feComposite')\r\n            .attr('operator', 'out')\r\n            .attr('in', 'SourceGraphic')\r\n            .attr('result', 'inverse');\r\n\r\n        innerShadow.append('feFlood')\r\n            .attr('flood-color', 'black')\r\n            .attr('flood-opacity', 0.3)\r\n            .attr('result', 'color');\r\n\r\n        innerShadow.append('feComposite')\r\n            .attr('operator', 'in')\r\n            .attr('in', 'color')\r\n            .attr('in2', 'inverse')\r\n            .attr('result', 'shadow');\r\n\r\n        const innerMerge = innerShadow.append('feMerge');\r\n        innerMerge.append('feMergeNode').attr('in', 'shadow');\r\n        innerMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    protected getColorScale(domain: string[], colors?: string[]): d3.ScaleOrdinal<string, string> {\r\n        const modernColors = [\r\n            '#0071e3', // Apple Blue\r\n            '#8e44ff', // Purple\r\n            '#ff2d55', // Pink\r\n            '#34c759', // Green\r\n            '#ff9f0a', // Orange\r\n            '#5ac8fa', // Cyan\r\n            '#af52de', // Violet\r\n            '#ff3b30', // Red\r\n        ];\r\n\r\n        return d3.scaleOrdinal<string, string>()\r\n            .domain(domain)\r\n            .range(colors || modernColors);\r\n    }\r\n\r\n    protected createGradient(id: string, colors: string[], direction: 'vertical' | 'horizontal' = 'vertical'): string {\r\n        const defs = this.svg.select('defs');\r\n        const gradient = defs.append('linearGradient')\r\n            .attr('id', id)\r\n            .attr('x1', direction === 'horizontal' ? '0%' : '0%')\r\n            .attr('y1', direction === 'horizontal' ? '0%' : '0%')\r\n            .attr('x2', direction === 'horizontal' ? '100%' : '0%')\r\n            .attr('y2', direction === 'horizontal' ? '0%' : '100%');\r\n\r\n        colors.forEach((color, i) => {\r\n            gradient.append('stop')\r\n                .attr('offset', `${(i / (colors.length - 1)) * 100}%`)\r\n                .attr('stop-color', color);\r\n        });\r\n\r\n        return `url(#${id})`;\r\n    }\r\n\r\n    protected addGlassEffect(selection: d3.Selection<any, any, any, any>, strength: 'subtle' | 'medium' | 'strong' = 'medium'): void {\r\n        const opacityMap = { subtle: 0.5, medium: 0.7, strong: 0.85 };\r\n        selection\r\n            .style('fill', function () {\r\n                const currentFill = d3.select(this).style('fill');\r\n                return currentFill;\r\n            })\r\n            .style('fill-opacity', opacityMap[strength])\r\n            .style('filter', 'url(#shadow-3d)');\r\n    }\r\n\r\n    protected addHoverEffect(selection: d3.Selection<any, any, any, any>, scale: number = 1.05): void {\r\n        selection\r\n            .style('cursor', 'pointer')\r\n            .on('mouseenter', function () {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .ease(d3.easeCubicOut)\r\n                    .style('filter', 'url(#glow-strong) url(#shadow-3d-strong)')\r\n                    .attr('transform', function () {\r\n                        const current = d3.select(this).attr('transform') || '';\r\n                        return current + ` scale(${scale})`;\r\n                    });\r\n            })\r\n            .on('mouseleave', function () {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .ease(d3.easeCubicOut)\r\n                    .style('filter', 'url(#shadow-3d)')\r\n                    .attr('transform', function () {\r\n                        const current = d3.select(this).attr('transform') || '';\r\n                        return current.replace(` scale(${scale})`, '');\r\n                    });\r\n            });\r\n    }\r\n\r\n    protected add3DDepth(selection: d3.Selection<any, any, any, any>, depth: number = 4): void {\r\n        selection.each(function () {\r\n            const element = d3.select(this);\r\n            const color = element.attr('fill') || element.style('fill');\r\n\r\n            // Create depth layers\r\n            for (let i = depth; i > 0; i--) {\r\n                const depthLayer = element.clone(true);\r\n                depthLayer\r\n                    .attr('fill', d3.color(color)?.darker(i * 0.3).toString() || color)\r\n                    .attr('transform', `translate(0, ${i})`)\r\n                    .style('opacity', 0.2)\r\n                    .lower();\r\n            }\r\n        });\r\n    }\r\n\r\n    protected formatNumber(value: number, decimals: number = 2): string {\r\n        return value.toLocaleString(undefined, {\r\n            minimumFractionDigits: 0,\r\n            maximumFractionDigits: decimals,\r\n        });\r\n    }\r\n\r\n    protected resize(width: number, height: number): void {\r\n        this.dimensions.width = width;\r\n        this.dimensions.height = height;\r\n        this.calculateInnerDimensions();\r\n\r\n        if (this.svg) {\r\n            this.svg\r\n                .attr('width', width)\r\n                .attr('height', height);\r\n        }\r\n\r\n        this.render();\r\n    }\r\n\r\n    abstract render(): void;\r\n    abstract updateData(data: any): void;\r\n}\r\n",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "container",
                        "type": "ElementRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 38,
                "jsdoctags": [
                    {
                        "name": "container",
                        "type": "ElementRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "inputsClass": [],
            "outputsClass": [],
            "properties": [
                {
                    "name": "animationDuration",
                    "defaultValue": "300",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 38,
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 22,
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "dimensions",
                    "defaultValue": "{\r\n        width: 800,\r\n        height: 500,\r\n        innerWidth: 0,\r\n        innerHeight: 0,\r\n    }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ChartDimensions",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 31,
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "margin",
                    "defaultValue": "{\r\n        top: 40,\r\n        right: 40,\r\n        bottom: 60,\r\n        left: 60,\r\n    }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ChartMargin",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 24,
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 21,
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "themeService",
                    "defaultValue": "inject(ThemeService)",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 20,
                    "modifierKind": [
                        124
                    ]
                }
            ],
            "methods": [
                {
                    "name": "add3DDepth",
                    "args": [
                        {
                            "name": "selection",
                            "type": "d3.Selection<any | any | any | any>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "depth",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "4"
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 307,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "selection",
                            "type": "d3.Selection<any | any | any | any>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "depth",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "4",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 70,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "addGlassEffect",
                    "args": [
                        {
                            "name": "selection",
                            "type": "d3.Selection<any | any | any | any>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "strength",
                            "type": "\"subtle\" | \"medium\" | \"strong\"",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'medium'"
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 269,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "selection",
                            "type": "d3.Selection<any | any | any | any>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "strength",
                            "type": "\"subtle\" | \"medium\" | \"strong\"",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'medium'",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addHoverEffect",
                    "args": [
                        {
                            "name": "selection",
                            "type": "d3.Selection<any | any | any | any>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "scale",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "1.05"
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 280,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "selection",
                            "type": "d3.Selection<any | any | any | any>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "scale",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "1.05",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "calculateInnerDimensions",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 65,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "createGradient",
                    "args": [
                        {
                            "name": "id",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colors",
                            "type": "string[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "direction",
                            "type": "\"vertical\" | \"horizontal\"",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'vertical'"
                        }
                    ],
                    "optional": false,
                    "returnType": "string",
                    "typeParameters": [],
                    "line": 251,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "id",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colors",
                            "type": "string[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "direction",
                            "type": "\"vertical\" | \"horizontal\"",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'vertical'",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "formatNumber",
                    "args": [
                        {
                            "name": "value",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "decimals",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "2"
                        }
                    ],
                    "optional": false,
                    "returnType": "string",
                    "typeParameters": [],
                    "line": 324,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "value",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "decimals",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "2",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "getColorScale",
                    "args": [
                        {
                            "name": "domain",
                            "type": "string[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colors",
                            "type": "string[]",
                            "optional": true,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "d3.ScaleOrdinal<string, string>",
                    "typeParameters": [],
                    "line": 234,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "domain",
                            "type": "string[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colors",
                            "type": "string[]",
                            "optional": true,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "initializeSVG",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 44,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ]
                },
                {
                    "name": "render",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 345,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        128
                    ]
                },
                {
                    "name": "resize",
                    "args": [
                        {
                            "name": "width",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "height",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 331,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        124
                    ],
                    "jsdoctags": [
                        {
                            "name": "width",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "height",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateData",
                    "args": [
                        {
                            "name": "data",
                            "type": "any",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 346,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        128
                    ],
                    "jsdoctags": [
                        {
                            "name": "data",
                            "type": "any",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                }
            ],
            "indexSignatures": [],
            "extends": [],
            "hostBindings": [],
            "hostListeners": []
        }
    ],
    "directives": [],
    "components": [
        {
            "name": "Area",
            "id": "component-Area-74eb38f341d7da31aa12a2fb0b224ff7f2a4ce659d9c2ef67632daf8e743c75e2181fe2f5cf5507d036d6fe3a1e938261374bfff886fc89cf505a9399e908cd5",
            "file": "src/components/charts/area/area.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-area",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./area.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 37,
                    "type": "AreaChartConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 34,
                    "type": "TimeSeriesDataPoint[] | Record<string | TimeSeriesDataPoint[]>",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 36,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 35,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 32,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 40,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 49,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 42,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "margin",
                    "defaultValue": "{ top: 40, right: 40, bottom: 60, left: 60 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 41,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 39,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 44
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 48
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 47
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 45
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 46
                }
            ],
            "methodsClass": [
                {
                    "name": "addArea",
                    "args": [
                        {
                            "name": "data",
                            "type": "TimeSeriesDataPoint[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "index",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 229,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "data",
                            "type": "TimeSeriesDataPoint[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "index",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addAxes",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 199,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 87,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addGrid",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 166,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addHoverOverlay",
                    "args": [
                        {
                            "name": "seriesData",
                            "type": "Record<string | TimeSeriesDataPoint[]>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 353,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "seriesData",
                            "type": "Record<string | TimeSeriesDataPoint[]>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 516,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 63,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 55,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 51,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "sanitizeClassName",
                    "args": [
                        {
                            "name": "name",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "string",
                    "typeParameters": [],
                    "line": 349,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "name",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "showMultiSeriesTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "points",
                            "type": "Array<literal type>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 484,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "points",
                            "type": "Array<literal type>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataPoint",
                            "type": "TimeSeriesDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 461,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataPoint",
                            "type": "TimeSeriesDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 127,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { TimeSeriesDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface AreaChartConfig {\r\n    showGrid?: boolean;\r\n    showLine?: boolean;\r\n    showPoints?: boolean;\r\n    curved?: boolean;\r\n    animated?: boolean;\r\n    stacked?: boolean;\r\n    colors?: string[];\r\n    fillOpacity?: number;\r\n    customTooltip?: (data: { date: Date; value: number; seriesName?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n    selector: 'app-area',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './area.html',\r\n    styleUrl: './area.css',\r\n})\r\nexport class Area implements OnInit, OnChanges {\r\n\r\n    constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: TimeSeriesDataPoint[] | Record<string, TimeSeriesDataPoint[]> = [];\r\n    @Input() width: number = 800;\r\n    @Input() height: number = 500;\r\n    @Input() config: AreaChartConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n    private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n    private innerWidth!: number;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n    private innerHeight!: number;\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n        this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'area-chart-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        const colors = this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444'];\r\n\r\n        colors.forEach((color, i) => {\r\n            const gradient = defs.append('linearGradient')\r\n                .attr('id', `area-gradient-${i}`)\r\n                .attr('x1', '0%')\r\n                .attr('y1', '0%')\r\n                .attr('x2', '0%')\r\n                .attr('y2', '100%');\r\n\r\n            gradient.append('stop')\r\n                .attr('offset', '0%')\r\n                .attr('stop-color', color)\r\n                .attr('stop-opacity', this.config.fillOpacity ?? 0.6);\r\n\r\n            gradient.append('stop')\r\n                .attr('offset', '100%')\r\n                .attr('stop-color', color)\r\n                .attr('stop-opacity', 0.1);\r\n        });\r\n\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'area-glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 2)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        if (!this.data || (Array.isArray(this.data) && this.data.length === 0)) return;\r\n\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        const isMultiSeries = !Array.isArray(this.data);\r\n        const seriesData: Record<string, TimeSeriesDataPoint[]> = isMultiSeries\r\n            ? this.data as Record<string, TimeSeriesDataPoint[]>\r\n            : { 'Series 1': this.data as TimeSeriesDataPoint[] };\r\n\r\n        const allData = Object.values(seriesData).flat();\r\n\r\n        const xScale = d3.scaleTime()\r\n            .domain(d3.extent(allData, d => d.date) as [Date, Date])\r\n            .range([0, this.innerWidth]);\r\n\r\n        const yScale = d3.scaleLinear()\r\n            .domain([0, d3.max(allData, d => d.value) || 0])\r\n            .nice()\r\n            .range([this.innerHeight, 0]);\r\n\r\n        const colorScale = d3.scaleOrdinal<string>()\r\n            .domain(Object.keys(seriesData))\r\n            .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444']);\r\n\r\n        if (this.config.showGrid !== false) {\r\n            this.addGrid(xScale, yScale);\r\n        }\r\n\r\n        Object.entries(seriesData).forEach(([seriesName, data], index) => {\r\n            this.addArea(data, xScale, yScale, colorScale(seriesName), index, seriesName);\r\n        });\r\n\r\n        this.addAxes(xScale, yScale);\r\n\r\n        // Add overlay for hover interaction\r\n        this.addHoverOverlay(seriesData, xScale, yScale, colorScale);\r\n    }\r\n\r\n    private addGrid(\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>\r\n    ): void {\r\n        const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n        gridGroup.selectAll('.grid-line-y')\r\n            .data(yScale.ticks(5))\r\n            .join('line')\r\n            .attr('class', 'grid-line-y')\r\n            .attr('x1', 0)\r\n            .attr('x2', this.innerWidth)\r\n            .attr('y1', d => yScale(d))\r\n            .attr('y2', d => yScale(d))\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('stroke-dasharray', '4,4')\r\n            .attr('opacity', 0.2);\r\n\r\n        gridGroup.selectAll('.grid-line-x')\r\n            .data(xScale.ticks(5))\r\n            .join('line')\r\n            .attr('class', 'grid-line-x')\r\n            .attr('x1', d => xScale(d))\r\n            .attr('x2', d => xScale(d))\r\n            .attr('y1', 0)\r\n            .attr('y2', this.innerHeight)\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('stroke-dasharray', '4,4')\r\n            .attr('opacity', 0.2);\r\n    }\r\n\r\n    private addAxes(\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>\r\n    ): void {\r\n\r\n        this.chartGroup.append('g')\r\n            .attr('class', 'x-axis')\r\n            .attr('transform', `translate(0,${this.innerHeight})`)\r\n            .call(d3.axisBottom(xScale).ticks(5))\r\n            .selectAll('text')\r\n            .attr('fill', 'var(--color-text)')\r\n            .attr('font-size', 'var(--font-size-sm)');\r\n\r\n        this.chartGroup.append('g')\r\n            .attr('class', 'y-axis')\r\n            .call(d3.axisLeft(yScale).ticks(5))\r\n            .selectAll('text')\r\n            .attr('fill', 'var(--color-text)')\r\n            .attr('font-size', 'var(--font-size-sm)');\r\n\r\n        this.chartGroup.selectAll('.domain')\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 2)\r\n            .attr('opacity', 0.6);\r\n\r\n        this.chartGroup.selectAll('.tick line')\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('opacity', 0.5);\r\n    }\r\n\r\n    private addArea(\r\n        data: TimeSeriesDataPoint[],\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>,\r\n        color: string,\r\n        index: number,\r\n        seriesName: string\r\n    ): void {\r\n        const areaGroup = this.chartGroup.append('g')\r\n            .attr('class', `area-group-${index}`);\r\n\r\n        // Define area generator\r\n        const areaGenerator = this.config.curved !== false\r\n            ? d3.area<TimeSeriesDataPoint>()\r\n                .x(d => xScale(d.date))\r\n                .y0(this.innerHeight)\r\n                .y1(d => yScale(d.value))\r\n                .curve(d3.curveMonotoneX)\r\n            : d3.area<TimeSeriesDataPoint>()\r\n                .x(d => xScale(d.date))\r\n                .y0(this.innerHeight)\r\n                .y1(d => yScale(d.value));\r\n\r\n        // Add area\r\n        const areaPath = areaGroup.append('path')\r\n            .datum(data)\r\n            .attr('class', 'area-path')\r\n            .attr('d', areaGenerator)\r\n            .attr('fill', `url(#area-gradient-${index})`)\r\n            .attr('opacity', 0);\r\n\r\n        if (this.config.animated !== false) {\r\n            areaPath\r\n                .transition()\r\n                .duration(1000)\r\n                .delay(index * 200)\r\n                .attr('opacity', 1);\r\n        } else {\r\n            areaPath.attr('opacity', 1);\r\n        }\r\n\r\n        // Add line on top if enabled\r\n        if (this.config.showLine !== false) {\r\n            const lineGenerator = this.config.curved !== false\r\n                ? d3.line<TimeSeriesDataPoint>()\r\n                    .x(d => xScale(d.date))\r\n                    .y(d => yScale(d.value))\r\n                    .curve(d3.curveMonotoneX)\r\n                : d3.line<TimeSeriesDataPoint>()\r\n                    .x(d => xScale(d.date))\r\n                    .y(d => yScale(d.value));\r\n\r\n            const linePath = areaGroup.append('path')\r\n                .datum(data)\r\n                .attr('class', 'area-line')\r\n                .attr('d', lineGenerator)\r\n                .attr('fill', 'none')\r\n                .attr('stroke', color)\r\n                .attr('stroke-width', 2.5)\r\n                .attr('stroke-linecap', 'round')\r\n                .attr('stroke-linejoin', 'round')\r\n                .style('filter', 'url(#area-glow)');\r\n\r\n            if (this.config.animated !== false) {\r\n                const totalLength = (linePath.node() as any)?.getTotalLength() || 0;\r\n                linePath\r\n                    .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\r\n                    .attr('stroke-dashoffset', totalLength)\r\n                    .transition()\r\n                    .duration(1000)\r\n                    .delay(index * 200)\r\n                    .attr('stroke-dashoffset', 0);\r\n            }\r\n        }\r\n\r\n        // Add points if enabled\r\n        if (this.config.showPoints) {\r\n            const points = areaGroup.selectAll('.area-point')\r\n                .data(data)\r\n                .join('circle')\r\n                .attr('class', 'area-point')\r\n                .attr('cx', d => xScale(d.date))\r\n                .attr('cy', d => yScale(d.value))\r\n                .attr('r', 0)\r\n                .attr('fill', color)\r\n                .attr('stroke', '#fff')\r\n                .attr('stroke-width', 2)\r\n                .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))')\r\n                .transition()\r\n                .duration(this.config.animated !== false ? 400 : 0)\r\n                .delay((_, i) => (this.config.animated !== false ? index * 200 + 800 + i * 20 : 0))\r\n                .attr('r', 4);\r\n\r\n            // Add hover effects\r\n            areaGroup.selectAll('.area-point')\r\n                .on('mouseenter', (event, d: any) => {\r\n                    d3.select(event.currentTarget)\r\n                        .transition()\r\n                        .duration(200)\r\n                        .attr('r', 6)\r\n                        .attr('stroke-width', 3);\r\n\r\n                    this.ngZone.run(() => {\r\n                        this.showTooltip(event, d, seriesName, color);\r\n                    });\r\n                })\r\n                .on('mouseleave', (event) => {\r\n                    d3.select(event.currentTarget)\r\n                        .transition()\r\n                        .duration(200)\r\n                        .attr('r', 4)\r\n                        .attr('stroke-width', 2);\r\n\r\n                    this.ngZone.run(() => {\r\n                        this.hideTooltip();\r\n                    });\r\n                });\r\n        }\r\n    }\r\n\r\n    private sanitizeClassName(name: string): string {\r\n        return name.replace(/[^a-zA-Z0-9-_]/g, '-');\r\n    }\r\n\r\n    private addHoverOverlay(\r\n        seriesData: Record<string, TimeSeriesDataPoint[]>,\r\n        xScale: d3.ScaleTime<number, number>,\r\n        yScale: d3.ScaleLinear<number, number>,\r\n        colorScale: d3.ScaleOrdinal<string, string>\r\n    ): void {\r\n        const overlay = this.chartGroup\r\n            .append('rect')\r\n            .attr('class', 'hover-overlay')\r\n            .attr('width', this.innerWidth)\r\n            .attr('height', this.innerHeight)\r\n            .attr('fill', 'none')\r\n            .attr('pointer-events', 'all')\r\n            .style('cursor', 'crosshair');\r\n\r\n        // Create vertical line for hover\r\n        const hoverLine = this.chartGroup\r\n            .append('line')\r\n            .attr('class', 'hover-line')\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('stroke-dasharray', '4,4')\r\n            .attr('opacity', 0)\r\n            .attr('pointer-events', 'none');\r\n\r\n        // Create hover circles for each series\r\n        const hoverCircles = this.chartGroup\r\n            .append('g')\r\n            .attr('class', 'hover-circles')\r\n            .attr('pointer-events', 'none');\r\n\r\n        Object.entries(seriesData).forEach(([seriesName, data]) => {\r\n            hoverCircles\r\n                .append('circle')\r\n                .attr('class', `hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n                .attr('r', 5)\r\n                .attr('fill', colorScale(seriesName))\r\n                .attr('stroke', '#fff')\r\n                .attr('stroke-width', 2)\r\n                .attr('opacity', 0)\r\n                .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))');\r\n        });\r\n\r\n        overlay\r\n            .on('mousemove', (event) => {\r\n                const [mouseX] = d3.pointer(event);\r\n                const hoveredDate = xScale.invert(mouseX);\r\n\r\n                // Find closest data points for each series\r\n                const closestPoints: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }> = [];\r\n\r\n                Object.entries(seriesData).forEach(([seriesName, data]) => {\r\n                    const bisect = d3.bisector<TimeSeriesDataPoint, Date>(d => d.date).left;\r\n                    const index = bisect(data, hoveredDate);\r\n\r\n                    const d0 = data[index - 1];\r\n                    const d1 = data[index];\r\n\r\n                    let closest = d0;\r\n                    if (d1 && d0) {\r\n                        closest = hoveredDate.getTime() - d0.date.getTime() > d1.date.getTime() - hoveredDate.getTime() ? d1 : d0;\r\n                    } else if (d1) {\r\n                        closest = d1;\r\n                    }\r\n\r\n                    if (closest) {\r\n                        const distance = Math.abs(xScale(closest.date) - mouseX);\r\n                        closestPoints.push({ seriesName, point: closest, distance });\r\n                    }\r\n                });\r\n\r\n                if (closestPoints.length > 0) {\r\n                    // Sort by distance and take the closest one for positioning\r\n                    closestPoints.sort((a, b) => a.distance - b.distance);\r\n                    const mainPoint = closestPoints[0];\r\n\r\n                    // Show vertical line\r\n                    hoverLine\r\n                        .attr('x1', xScale(mainPoint.point.date))\r\n                        .attr('x2', xScale(mainPoint.point.date))\r\n                        .attr('y1', 0)\r\n                        .attr('y2', this.innerHeight)\r\n                        .attr('opacity', 0.6);\r\n\r\n                    // Show circles for all series\r\n                    closestPoints.forEach(({ seriesName, point }) => {\r\n                        hoverCircles\r\n                            .select(`.hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n                            .attr('cx', xScale(point.date))\r\n                            .attr('cy', yScale(point.value))\r\n                            .attr('opacity', 1);\r\n                    });\r\n\r\n                    // Show tooltip with all series data\r\n                    this.ngZone.run(() => {\r\n                        this.showMultiSeriesTooltip(event, closestPoints, colorScale);\r\n                    });\r\n                }\r\n            })\r\n            .on('mouseleave', () => {\r\n                hoverLine.attr('opacity', 0);\r\n                hoverCircles.selectAll('circle').attr('opacity', 0);\r\n                this.ngZone.run(() => {\r\n                    this.hideTooltip();\r\n                });\r\n            });\r\n    }\r\n\r\n    private showTooltip(event: MouseEvent, dataPoint: TimeSeriesDataPoint, seriesName: string, color: string): void {\r\n        if (this.config.customTooltip) {\r\n            const customData = this.config.customTooltip({ date: dataPoint.date, value: dataPoint.value, seriesName });\r\n            this.tooltipTitle = customData.title || '';\r\n            this.tooltipData = customData.items.map(item => ({\r\n                label: item.label,\r\n                value: item.value,\r\n                color: item.color\r\n            }));\r\n        } else {\r\n            this.tooltipTitle = seriesName;\r\n            this.tooltipData = [\r\n                { label: 'Date', value: dataPoint.date.toLocaleDateString() },\r\n                { label: 'Value', value: dataPoint.value.toFixed(2), color }\r\n            ];\r\n        }\r\n\r\n        this.tooltipX = event.clientX;\r\n        this.tooltipY = event.clientY;\r\n        this.tooltipVisible = true;\r\n        this.cdr.detectChanges();\r\n    }\r\n\r\n    private showMultiSeriesTooltip(\r\n        event: MouseEvent,\r\n        points: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }>,\r\n        colorScale: d3.ScaleOrdinal<string, string>\r\n    ): void {\r\n        if (this.config.customTooltip && points.length > 0) {\r\n            const customData = this.config.customTooltip({\r\n                date: points[0].point.date,\r\n                value: points[0].point.value,\r\n                seriesName: points[0].seriesName\r\n            });\r\n            this.tooltipTitle = customData.title || '';\r\n            this.tooltipData = customData.items.map(item => ({\r\n                label: item.label,\r\n                value: item.value,\r\n                color: item.color\r\n            }));\r\n        } else {\r\n            this.tooltipTitle = points[0].point.date.toLocaleDateString();\r\n            this.tooltipData = points.map(({ seriesName, point }) => ({\r\n                label: seriesName,\r\n                value: point.value.toFixed(2),\r\n                color: colorScale(seriesName)\r\n            }));\r\n        }\r\n\r\n        this.tooltipX = event.clientX;\r\n        this.tooltipY = event.clientY;\r\n        this.tooltipVisible = true;\r\n        this.cdr.detectChanges();\r\n    }\r\n\r\n    private hideTooltip(): void {\r\n        this.tooltipVisible = false;\r\n        this.cdr.detectChanges();\r\n    }\r\n}\r\n",
            "styleUrl": "./area.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 26,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"area-chart-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "Axis",
            "id": "component-Axis-96bb2b32734caefcfd9b65092c36cc8a3e900f8bac9247f7e588f43613f61158ad0acdd7da8c07d1688b2d364a76311787a7991396492f1425b159b5218b7e32",
            "file": "src/components/base/axis/axis.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-axis",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./axis.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "gridHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 31,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "gridLines",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 29,
                    "type": "boolean",
                    "decorators": []
                },
                {
                    "name": "gridWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 30,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "label",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 25,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "orientation",
                    "defaultValue": "'bottom'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 24,
                    "type": "AxisOrientation",
                    "decorators": []
                },
                {
                    "name": "scale",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 23,
                    "type": "AxisScale",
                    "decorators": []
                },
                {
                    "name": "tickFormat",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 27,
                    "type": "function",
                    "decorators": []
                },
                {
                    "name": "ticks",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 26,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "tickValues",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 28,
                    "type": "any[]",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "axis",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Axis<any>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 33,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "axisContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef<SVGGElement>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 21,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'axisContainer', {static: false}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                }
            ],
            "methodsClass": [
                {
                    "name": "addAxisLabel",
                    "args": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 149,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "createAxis",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 52,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngAfterViewInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 39,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 43,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 35,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "renderAxis",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 81,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "renderGridLines",
                    "args": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 114,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport type AxisOrientation = 'top' | 'bottom' | 'left' | 'right';\r\nexport type AxisScale = d3.AxisScale<any>;\r\n\r\n@Component({\r\n  selector: 'app-axis',\r\n  standalone: true,\r\n  imports: [],\r\n  templateUrl: './axis.html',\r\n  styleUrl: './axis.css',\r\n})\r\nexport class Axis implements OnInit, AfterViewInit, OnChanges {\r\n\r\n  constructor(themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @ViewChild('axisContainer', { static: false }) axisContainer!: ElementRef<SVGGElement>;\r\n\r\n  @Input() scale!: AxisScale;\r\n  @Input() orientation: AxisOrientation = 'bottom';\r\n  @Input() label?: string;\r\n  @Input() ticks?: number;\r\n  @Input() tickFormat?: (domainValue: any, index: number) => string;\r\n  @Input() tickValues?: any[];\r\n  @Input() gridLines: boolean = false;\r\n  @Input() gridWidth?: number;\r\n  @Input() gridHeight?: number;\r\n\r\n  private axis!: d3.Axis<any>;\r\n\r\n  ngOnInit(): void {\r\n    this.createAxis();\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.renderAxis();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['scale'] || changes['orientation'] || changes['ticks'] || changes['tickFormat'] || changes['tickValues']) {\r\n      this.createAxis();\r\n      if (this.axisContainer) {\r\n        this.renderAxis();\r\n      }\r\n    }\r\n  }\r\n\r\n  private createAxis(): void {\r\n    switch (this.orientation) {\r\n      case 'top':\r\n        this.axis = d3.axisTop(this.scale);\r\n        break;\r\n      case 'bottom':\r\n        this.axis = d3.axisBottom(this.scale);\r\n        break;\r\n      case 'left':\r\n        this.axis = d3.axisLeft(this.scale);\r\n        break;\r\n      case 'right':\r\n        this.axis = d3.axisRight(this.scale);\r\n        break;\r\n    }\r\n\r\n    if (this.ticks) {\r\n      this.axis.ticks(this.ticks);\r\n    }\r\n\r\n    if (this.tickFormat) {\r\n      this.axis.tickFormat(this.tickFormat);\r\n    }\r\n\r\n    if (this.tickValues) {\r\n      this.axis.tickValues(this.tickValues);\r\n    }\r\n  }\r\n\r\n  private renderAxis(): void {\r\n    if (!this.axisContainer) return;\r\n\r\n    const g = d3.select(this.axisContainer.nativeElement);\r\n    g.selectAll('*').remove();\r\n\r\n    if (this.gridLines && this.gridWidth && this.gridHeight) {\r\n      this.renderGridLines(g);\r\n    }\r\n\r\n    g.call(this.axis as any);\r\n\r\n    g.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    g.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1.5)\r\n      .attr('opacity', 0.5);\r\n\r\n    g.selectAll('.tick text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)')\r\n      .attr('font-family', 'var(--font-family)')\r\n      .style('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.1)');\r\n\r\n    if (this.label) {\r\n      this.addAxisLabel(g);\r\n    }\r\n  }\r\n\r\n  private renderGridLines(g: d3.Selection<SVGGElement, unknown, null, undefined>): void {\r\n    const isVertical = this.orientation === 'left' || this.orientation === 'right';\r\n\r\n    const tickValues = this.tickValues ||\r\n      ((this.scale as any).ticks ? (this.scale as any).ticks(this.ticks || 10) : this.scale.domain());\r\n\r\n    if (isVertical) {\r\n      g.selectAll('.grid-line')\r\n        .data(tickValues)\r\n        .join('line')\r\n        .attr('class', 'grid-line')\r\n        .attr('x1', 0)\r\n        .attr('x2', this.gridWidth!)\r\n        .attr('y1', (d: any) => this.scale(d)!)\r\n        .attr('y2', (d: any) => this.scale(d)!)\r\n        .attr('stroke', 'var(--color-border)')\r\n        .attr('stroke-width', 1)\r\n        .attr('opacity', 0.2)\r\n        .attr('stroke-dasharray', '4,4');\r\n    } else {\r\n      g.selectAll('.grid-line')\r\n        .data(tickValues)\r\n        .join('line')\r\n        .attr('class', 'grid-line')\r\n        .attr('x1', (d: any) => this.scale(d)!)\r\n        .attr('x2', (d: any) => this.scale(d)!)\r\n        .attr('y1', 0)\r\n        .attr('y2', -this.gridHeight!)\r\n        .attr('stroke', 'var(--color-border)')\r\n        .attr('stroke-width', 1)\r\n        .attr('opacity', 0.2)\r\n        .attr('stroke-dasharray', '4,4');\r\n    }\r\n  }\r\n\r\n  private addAxisLabel(g: d3.Selection<SVGGElement, unknown, null, undefined>): void {\r\n    const isVertical = this.orientation === 'left' || this.orientation === 'right';\r\n\r\n    if (isVertical) {\r\n      const yPos = this.gridHeight ? -this.gridHeight / 2 : 0;\r\n      const xPos = this.orientation === 'left' ? -50 : 50;\r\n\r\n      g.append('text')\r\n        .attr('class', 'axis-label')\r\n        .attr('transform', `translate(${xPos}, ${yPos}) rotate(-90)`)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', 'var(--color-text)')\r\n        .attr('font-size', 'var(--font-size-md)')\r\n        .attr('font-weight', '600')\r\n        .attr('font-family', 'var(--font-family)')\r\n        .attr('letter-spacing', '0.5px')\r\n        .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.15)')\r\n        .text(this.label!);\r\n    } else {\r\n      const xPos = this.gridWidth ? this.gridWidth / 2 : 0;\r\n      const yPos = this.orientation === 'top' ? -25 : 45;\r\n\r\n      g.append('text')\r\n        .attr('class', 'axis-label')\r\n        .attr('x', xPos)\r\n        .attr('y', yPos)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', 'var(--color-text)')\r\n        .attr('font-size', 'var(--font-size-md)')\r\n        .attr('font-weight', '600')\r\n        .attr('font-family', 'var(--font-family)')\r\n        .attr('letter-spacing', '0.5px')\r\n        .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.15)')\r\n        .text(this.label!);\r\n    }\r\n  }\r\n}\r\n",
            "styleUrl": "./axis.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 15,
                "jsdoctags": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "AfterViewInit",
                "OnChanges"
            ],
            "templateData": "<svg:g #axisContainer class=\"axis\"></svg:g>\r\n"
        },
        {
            "name": "Bar",
            "id": "component-Bar-84cd791738dbc0dc5f7be82389429ec659ece7917b7c9513f24fe516ccd02bc5cc08b4b4a510d8c51e81c4933c48b9a23632ad3917835cb65c0c832803dbdc79",
            "file": "src/components/charts/bar/bar.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-bar",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./bar.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "autoRotateLabels",
                    "defaultValue": "true",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 37,
                    "type": "boolean",
                    "decorators": []
                },
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 36,
                    "type": "BarChartConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 33,
                    "type": "ChartDataPoint[]",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 35,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "labelRotationAngle",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 38,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 34,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 27,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 41,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 44,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 43,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "margin",
                    "defaultValue": "{ top: 40, right: 40, bottom: 60, left: 60 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 42,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 40,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 46
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 50
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 49
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 47
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 48
                }
            ],
            "methodsClass": [
                {
                    "name": "addAxes",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "isVertical",
                            "type": "boolean",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 245,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "isVertical",
                            "type": "boolean",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addBars",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "isVertical",
                            "type": "boolean",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "barRadius",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 325,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string> | d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "isVertical",
                            "type": "boolean",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "barRadius",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 88,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addGrid",
                    "args": [
                        {
                            "name": "scale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "isVertical",
                            "type": "boolean",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 213,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "scale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "isVertical",
                            "type": "boolean",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 511,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 64,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 56,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 52,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataPoint",
                            "type": "ChartDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 485,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataPoint",
                            "type": "ChartDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 162,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { ChartDataPoint } from '../../../types/chart';\r\nimport { calculateLabelRotation, getMaxLabelWidth } from '../../../utils/chart-helpers';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface BarChartConfig {\r\n  orientation?: 'vertical' | 'horizontal';\r\n  showGrid?: boolean;\r\n  showValues?: boolean;\r\n  animated?: boolean;\r\n  barRadius?: number;\r\n  barPadding?: number;\r\n  colors?: string[];\r\n  customTooltip?: (data: { label: string; value: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-bar',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './bar.html',\r\n  styleUrl: './bar.css',\r\n})\r\nexport class Bar implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data: ChartDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: BarChartConfig = {};\r\n  @Input() autoRotateLabels: boolean = true;\r\n  @Input() labelRotationAngle?: number;\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'bar-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    // Enhanced glass gradient with more layers\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'bar-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '0%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.8)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '30%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.4)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '70%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    // Enhanced 3D shadow with multiple layers\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'bar-3d-shadow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 6);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 8)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.25);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    // Hover glow effect\r\n    const hoverGlow = defs.append('filter')\r\n      .attr('id', 'bar-hover-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    hoverGlow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 8)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = hoverGlow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const isVertical = this.config.orientation !== 'horizontal';\r\n    const barRadius = this.config.barRadius ?? 8;\r\n\r\n    const xScale = isVertical\r\n      ? d3.scaleBand()\r\n        .domain(this.data.map(d => d.label))\r\n        .range([0, this.innerWidth])\r\n        .padding(this.config.barPadding ?? 0.3)\r\n      : d3.scaleLinear()\r\n        .domain([0, d3.max(this.data, d => d.value) || 0])\r\n        .range([0, this.innerWidth]);\r\n\r\n    const yScale = isVertical\r\n      ? d3.scaleLinear()\r\n        .domain([0, d3.max(this.data, d => d.value) || 0])\r\n        .range([this.innerHeight, 0])\r\n      : d3.scaleBand()\r\n        .domain(this.data.map(d => d.label))\r\n        .range([0, this.innerHeight])\r\n        .padding(this.config.barPadding ?? 0.3);\r\n\r\n    // Modern 2026 color palette inspired by Apple design\r\n    const modernColors = this.config.colors || [\r\n      '#0071e3', // Apple Blue\r\n      '#8e44ff', // Purple\r\n      '#ff2d55', // Pink\r\n      '#34c759', // Green\r\n      '#ff9f0a', // Orange\r\n      '#5ac8fa', // Cyan\r\n      '#af52de', // Violet\r\n      '#ff3b30'  // Red\r\n    ];\r\n\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(this.data.map(d => d.label))\r\n      .range(modernColors);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(isVertical ? yScale as any : xScale as any, isVertical);\r\n    }\r\n\r\n    this.addAxes(xScale as any, yScale as any, isVertical);\r\n\r\n    this.addBars(xScale as any, yScale as any, colorScale, isVertical, barRadius);\r\n  }\r\n\r\n  private addGrid(scale: d3.ScaleLinear<number, number>, isVertical: boolean): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    if (isVertical) {\r\n      gridGroup.selectAll('.grid-line')\r\n        .data(scale.ticks(5))\r\n        .join('line')\r\n        .attr('class', 'grid-line')\r\n        .attr('x1', 0)\r\n        .attr('x2', this.innerWidth)\r\n        .attr('y1', d => scale(d))\r\n        .attr('y2', d => scale(d))\r\n        .attr('stroke', 'var(--color-border)')\r\n        .attr('stroke-width', 1)\r\n        .attr('stroke-dasharray', '4,4')\r\n        .attr('opacity', 0.2);\r\n    } else {\r\n      gridGroup.selectAll('.grid-line')\r\n        .data(scale.ticks(5))\r\n        .join('line')\r\n        .attr('class', 'grid-line')\r\n        .attr('x1', d => scale(d))\r\n        .attr('x2', d => scale(d))\r\n        .attr('y1', 0)\r\n        .attr('y2', this.innerHeight)\r\n        .attr('stroke', 'var(--color-border)')\r\n        .attr('stroke-width', 1)\r\n        .attr('stroke-dasharray', '4,4')\r\n        .attr('opacity', 0.2);\r\n    }\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    isVertical: boolean\r\n  ): void {\r\n    const xAxis = isVertical\r\n      ? d3.axisBottom(xScale as d3.ScaleBand<string>)\r\n      : d3.axisBottom(xScale as d3.ScaleLinear<number, number>).ticks(5);\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(xAxis as any)\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)')\r\n      .style('text-anchor', isVertical ? 'middle' : 'end');\r\n\r\n    const yAxis = isVertical\r\n      ? d3.axisLeft(yScale as d3.ScaleLinear<number, number>).ticks(5)\r\n      : d3.axisLeft(yScale as d3.ScaleBand<string>);\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(yAxis as any)\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('opacity', 0.5);\r\n\r\n    if (isVertical) {\r\n      const labels = this.data.map(d => String(d.label));\r\n      const fontSize = 14;\r\n\r\n      let rotationAngle = 0;\r\n      if (this.labelRotationAngle !== undefined) {\r\n        rotationAngle = this.labelRotationAngle;\r\n      } else if (this.autoRotateLabels) {\r\n        const maxWidth = getMaxLabelWidth(labels, fontSize);\r\n        rotationAngle = calculateLabelRotation(this.innerWidth, labels, maxWidth);\r\n      }\r\n\r\n      const xAxisLabels = this.chartGroup.selectAll('.x-axis .tick text');\r\n\r\n      if (rotationAngle === 0) {\r\n        xAxisLabels\r\n          .attr('transform', 'rotate(0)')\r\n          .attr('dy', '1.2em')\r\n          .attr('dx', '0em')\r\n          .style('text-anchor', 'middle');\r\n      } else if (rotationAngle === -45) {\r\n        xAxisLabels\r\n          .attr('transform', 'rotate(-45)')\r\n          .attr('dy', '0.75em')\r\n          .attr('dx', '-0.5em')\r\n          .style('text-anchor', 'end');\r\n      } else if (rotationAngle === -90) {\r\n        xAxisLabels\r\n          .attr('transform', 'rotate(-90)')\r\n          .attr('dy', '-0.5em')\r\n          .attr('dx', '-1.5em')\r\n          .style('text-anchor', 'end');\r\n      } else {\r\n        xAxisLabels\r\n          .attr('transform', `rotate(${rotationAngle})`)\r\n          .attr('dy', '0.75em')\r\n          .attr('dx', rotationAngle < 0 ? '-0.5em' : '0.5em')\r\n          .style('text-anchor', rotationAngle < 0 ? 'end' : 'start');\r\n      }\r\n    }\r\n  }\r\n\r\n  private addBars(\r\n    xScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleBand<string> | d3.ScaleLinear<number, number>,\r\n    colorScale: d3.ScaleOrdinal<string, string>,\r\n    isVertical: boolean,\r\n    barRadius: number\r\n  ): void {\r\n    const barsGroup = this.chartGroup.append('g').attr('class', 'bars');\r\n\r\n    const bars = barsGroup.selectAll('.bar-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'bar-group');\r\n\r\n    if (isVertical) {\r\n      const xBand = xScale as d3.ScaleBand<string>;\r\n      const yLinear = yScale as d3.ScaleLinear<number, number>;\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-shadow')\r\n        .attr('x', d => (xBand(d.label) || 0) + 2)\r\n        .attr('y', d => yLinear(d.value) + 2)\r\n        .attr('width', xBand.bandwidth())\r\n        .attr('height', d => this.innerHeight - yLinear(d.value))\r\n        .attr('fill', 'rgba(0, 0, 0, 0.1)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius);\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar')\r\n        .attr('x', d => xBand(d.label) || 0)\r\n        .attr('y', this.innerHeight)\r\n        .attr('width', xBand.bandwidth())\r\n        .attr('height', 0)\r\n        .attr('fill', d => d.color || colorScale(d.label))\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .style('filter', 'url(#bar-3d-shadow)')\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('y', d => yLinear(d.value))\r\n        .attr('height', d => this.innerHeight - yLinear(d.value));\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-glass')\r\n        .attr('x', d => xBand(d.label) || 0)\r\n        .attr('y', d => yLinear(d.value))\r\n        .attr('width', xBand.bandwidth())\r\n        .attr('height', d => this.innerHeight - yLinear(d.value))\r\n        .attr('fill', 'url(#bar-glass-gradient)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .attr('pointer-events', 'none')\r\n        .attr('opacity', 0)\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('opacity', 1);\r\n\r\n    } else {\r\n      const xLinear = xScale as d3.ScaleLinear<number, number>;\r\n      const yBand = yScale as d3.ScaleBand<string>;\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-shadow')\r\n        .attr('x', 2)\r\n        .attr('y', d => (yBand(d.label) || 0) + 2)\r\n        .attr('width', d => xLinear(d.value))\r\n        .attr('height', yBand.bandwidth())\r\n        .attr('fill', 'rgba(0, 0, 0, 0.1)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius);\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar')\r\n        .attr('x', 0)\r\n        .attr('y', d => yBand(d.label) || 0)\r\n        .attr('width', 0)\r\n        .attr('height', yBand.bandwidth())\r\n        .attr('fill', d => d.color || colorScale(d.label))\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .style('filter', 'url(#bar-3d-shadow)')\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('width', d => xLinear(d.value));\r\n\r\n      bars.append('rect')\r\n        .attr('class', 'bar-glass')\r\n        .attr('x', 0)\r\n        .attr('y', d => yBand(d.label) || 0)\r\n        .attr('width', d => xLinear(d.value))\r\n        .attr('height', yBand.bandwidth())\r\n        .attr('fill', 'url(#bar-glass-gradient)')\r\n        .attr('rx', barRadius)\r\n        .attr('ry', barRadius)\r\n        .attr('pointer-events', 'none')\r\n        .attr('opacity', 0)\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50)\r\n        .attr('opacity', 1);\r\n    }\r\n\r\n    bars.selectAll('.bar')\r\n      .style('cursor', 'pointer')\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(300)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('opacity', 0.9)\r\n          .style('filter', 'url(#bar-hover-glow) url(#bar-3d-shadow)')\r\n          .attr('transform', isVertical ? 'translateY(-5) scale(1.02)' : 'translateX(5) scale(1.02)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(300)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('opacity', 1)\r\n          .style('filter', 'url(#bar-3d-shadow)')\r\n          .attr('transform', 'translate(0,0) scale(1)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n\r\n    if (this.config.showValues) {\r\n      bars.append('text')\r\n        .attr('class', 'bar-value')\r\n        .attr('x', d => isVertical ? ((xScale as d3.ScaleBand<string>)(d.label) || 0) + (xScale as d3.ScaleBand<string>).bandwidth() / 2 : (xScale as d3.ScaleLinear<number, number>)(d.value) + 5)\r\n        .attr('y', d => isVertical ? (yScale as d3.ScaleLinear<number, number>)(d.value) - 5 : ((yScale as d3.ScaleBand<string>)(d.label) || 0) + (yScale as d3.ScaleBand<string>).bandwidth() / 2 + 5)\r\n        .attr('text-anchor', isVertical ? 'middle' : 'start')\r\n        .attr('fill', 'var(--color-text)')\r\n        .attr('font-size', 'var(--font-size-sm)')\r\n        .attr('font-weight', '600')\r\n        .style('text-shadow', '0 1px 2px rgba(255, 255, 255, 0.8)')\r\n        .attr('opacity', 0)\r\n        .text(d => d.value.toLocaleString())\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 50 + 300)\r\n        .attr('opacity', 1);\r\n    }\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: ChartDataPoint, colorScale: d3.ScaleOrdinal<string, string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip({\r\n        label: dataPoint.label,\r\n        value: dataPoint.value,\r\n        color: dataPoint.color || colorScale(dataPoint.label)\r\n      });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataPoint.label;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: dataPoint.value.toLocaleString(), color: dataPoint.color || colorScale(dataPoint.label) }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "styleUrl": "./bar.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 27,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"bar-chart-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "ChartContainer",
            "id": "component-ChartContainer-0e25fa038563b02338a3e00884fe5ad13b3bf3f751efd87cf932ba3fedc284e506e3a51d6ad3f6300f101338c91a7bdbd7aa6b3f4e6839ebfcb48bfb0042f1c5",
            "file": "src/components/base/chart-container/chart-container.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-chart-container",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./chart-container.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "footer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 22,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "height",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 25,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "loading",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 26,
                    "type": "boolean",
                    "decorators": []
                },
                {
                    "name": "subtitle",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 21,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "theme",
                    "defaultValue": "'glass'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 23,
                    "type": "ChartTheme",
                    "decorators": []
                },
                {
                    "name": "title",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 20,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "width",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 24,
                    "type": "string",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [],
            "methodsClass": [
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 28,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "CommonModule",
                    "type": "module"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { CommonModule } from '@angular/common';\r\nimport { Component, Input, OnChanges, SimpleChanges } from '@angular/core';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport type ChartTheme = 'glass' | 'solid' | 'gradient';\r\n\r\n@Component({\r\n    selector: 'app-chart-container',\r\n    standalone: true,\r\n    imports: [CommonModule],\r\n    templateUrl: './chart-container.html',\r\n    styleUrl: './chart-container.css',\r\n})\r\nexport class ChartContainer implements OnChanges {\r\n\r\n    constructor(themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    @Input() title?: string;\r\n    @Input() subtitle?: string;\r\n    @Input() footer?: string;\r\n    @Input() theme: ChartTheme = 'glass';\r\n    @Input() width?: string;\r\n    @Input() height?: string;\r\n    @Input() loading: boolean = false;\r\n\r\n    ngOnChanges(changes: SimpleChanges): void { }\r\n}\r\n",
            "styleUrl": "./chart-container.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 14,
                "jsdoctags": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnChanges"
            ],
            "templateData": "<div class=\"chart-header\" *ngIf=\"title || subtitle\">\r\n    <h3 class=\"chart-title\" *ngIf=\"title\">{{ title }}</h3>\r\n    <p class=\"chart-subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</p>\r\n</div>\r\n\r\n<div class=\"chart-content\" [class.chart-loading]=\"loading\">\r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"chart-loading-overlay\" *ngIf=\"loading\" aria-live=\"polite\" aria-busy=\"true\">\r\n        <div class=\"chart-loading-spinner\"></div>\r\n        <span class=\"chart-loading-text\">Loading...</span>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"chart-footer\" *ngIf=\"footer\">\r\n    <p class=\"chart-footer-text\">{{ footer }}</p>\r\n</div>\r\n"
        },
        {
            "name": "Gauge",
            "id": "component-Gauge-f21a6225cb9661e5c79b63711ef92f14d42da075bd9a5b1784dee4dfd96527e7e994e7038ac34b8c9fd433086774c35541c9f6282265b4ba81054c301e33f42a",
            "file": "src/components/charts/gauge/gauge.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-gauge",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./gauge.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 28,
                    "type": "GaugeConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "{ value: 0, min: 0, max: 100 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 25,
                    "type": "GaugeData",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "300",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 27,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "400",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 26,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 23,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 31,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 30,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 33
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 37
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 36
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 34
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35
                }
            ],
            "methodsClass": [
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 72,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addThresholds",
                    "args": [
                        {
                            "name": "radius",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "arcWidth",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "startAngle",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "endAngle",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 251,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "radius",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "arcWidth",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "startAngle",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "endAngle",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "getColor",
                    "args": [
                        {
                            "name": "percentage",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "string",
                    "typeParameters": [],
                    "line": 279,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "percentage",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 51,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 43,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 39,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 132,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { GaugeData } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface GaugeConfig {\r\n    animated?: boolean;\r\n    showValue?: boolean;\r\n    showLabel?: boolean;\r\n    arcWidth?: number;\r\n    startAngle?: number;\r\n    endAngle?: number;\r\n}\r\n\r\n@Component({\r\n    selector: 'app-gauge',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './gauge.html',\r\n    styleUrl: './gauge.css',\r\n})\r\nexport class Gauge implements OnInit, OnChanges {\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: GaugeData = { value: 0, min: 0, max: 100 };\r\n    @Input() width: number = 400;\r\n    @Input() height: number = 300;\r\n    @Input() config: GaugeConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'gauge-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.width / 2},${this.height * 0.75})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        const gradient = defs.append('linearGradient')\r\n            .attr('id', 'gauge-gradient')\r\n            .attr('x1', '0%')\r\n            .attr('y1', '0%')\r\n            .attr('x2', '100%')\r\n            .attr('y2', '0%');\r\n\r\n        gradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', '#10b981');\r\n\r\n        gradient.append('stop')\r\n            .attr('offset', '50%')\r\n            .attr('stop-color', '#f59e0b');\r\n\r\n        gradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', '#ef4444');\r\n\r\n        const glassGradient = defs.append('radialGradient')\r\n            .attr('id', 'gauge-glass-gradient');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.6)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        const shadow = defs.append('filter')\r\n            .attr('id', 'gauge-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 3);\r\n\r\n        shadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 3);\r\n\r\n        shadow.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const feMerge = shadow.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        const radius = Math.min(this.width, this.height * 1.5) / 2 - 20;\r\n        const arcWidth = this.config.arcWidth ?? 40;\r\n        const startAngle = this.config.startAngle ?? -Math.PI * 0.75;\r\n        const endAngle = this.config.endAngle ?? Math.PI * 0.75;\r\n\r\n        const backgroundArc = d3.arc()\r\n            .innerRadius(radius - arcWidth)\r\n            .outerRadius(radius)\r\n            .startAngle(startAngle)\r\n            .endAngle(endAngle)\r\n            .cornerRadius(8);\r\n\r\n        this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle })\r\n            .attr('class', 'gauge-background')\r\n            .attr('d', backgroundArc as any)\r\n            .attr('fill', 'var(--color-border)')\r\n            .attr('opacity', 0.2);\r\n\r\n        const valueArc = d3.arc()\r\n            .innerRadius(radius - arcWidth)\r\n            .outerRadius(radius)\r\n            .startAngle(startAngle)\r\n            .cornerRadius(8);\r\n\r\n        const percentage = (this.data.value - this.data.min) / (this.data.max - this.data.min);\r\n        const valueAngle = startAngle + (endAngle - startAngle) * percentage;\r\n\r\n        this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle: valueAngle })\r\n            .attr('class', 'gauge-value-shadow')\r\n            .attr('d', valueArc as any)\r\n            .attr('transform', 'translate(0, 3)')\r\n            .attr('fill', 'rgba(0, 0, 0, 0.2)');\r\n\r\n        const valuePath = this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle: startAngle })\r\n            .attr('class', 'gauge-value')\r\n            .attr('d', valueArc as any)\r\n            .attr('fill', this.getColor(percentage))\r\n            .style('filter', 'url(#gauge-shadow)');\r\n\r\n        if (this.config.animated !== false) {\r\n            valuePath\r\n                .transition()\r\n                .duration(1500)\r\n                .ease(d3.easeElasticOut.amplitude(1).period(0.5))\r\n                .attrTween('d', function () {\r\n                    const interpolate = d3.interpolate(startAngle, valueAngle);\r\n                    return function (t: number) {\r\n                        const currentAngle = interpolate(t);\r\n                        return valueArc({ startAngle, endAngle: currentAngle } as any)!;\r\n                    };\r\n                });\r\n        } else {\r\n            valuePath.datum({ startAngle, endAngle: valueAngle }).attr('d', valueArc as any);\r\n        }\r\n\r\n        this.chartGroup.append('path')\r\n            .datum({ startAngle, endAngle: valueAngle })\r\n            .attr('class', 'gauge-glass')\r\n            .attr('d', valueArc as any)\r\n            .attr('fill', 'url(#gauge-glass-gradient)')\r\n            .attr('pointer-events', 'none')\r\n            .attr('opacity', 0.3);\r\n\r\n        this.chartGroup.append('circle')\r\n            .attr('r', radius - arcWidth - 10)\r\n            .attr('fill', 'var(--color-background)')\r\n            .attr('opacity', 0.5)\r\n            .style('filter', 'url(#gauge-shadow)');\r\n\r\n        if (this.config.showValue !== false) {\r\n            const valueText = this.chartGroup.append('text')\r\n                .attr('class', 'gauge-value-text')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '-0.3em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', radius / 3)\r\n                .attr('font-weight', '700')\r\n                .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.2)');\r\n\r\n            if (this.config.animated !== false) {\r\n                valueText.text('0');\r\n                const targetValue = this.data.value;\r\n                valueText\r\n                    .transition()\r\n                    .duration(1500)\r\n                    .tween('text', function () {\r\n                        const interpolate = d3.interpolate(0, targetValue);\r\n                        const element = this;\r\n                        return function (t: number) {\r\n                            d3.select(element).text(Math.round(interpolate(t)));\r\n                        };\r\n                    });\r\n            } else {\r\n                valueText.text(Math.round(this.data.value));\r\n            }\r\n        }\r\n\r\n        if (this.config.showLabel !== false && this.data.label) {\r\n            this.chartGroup.append('text')\r\n                .attr('class', 'gauge-label-text')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '1.2em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', 'var(--font-size-sm)')\r\n                .attr('opacity', 0.7)\r\n                .text(this.data.label);\r\n        }\r\n\r\n        if (this.data.thresholds && this.data.thresholds.length > 0) {\r\n            this.addThresholds(radius, arcWidth, startAngle, endAngle);\r\n        }\r\n    }\r\n\r\n    private addThresholds(\r\n        radius: number,\r\n        arcWidth: number,\r\n        startAngle: number,\r\n        endAngle: number\r\n    ): void {\r\n        const thresholdGroup = this.chartGroup.append('g').attr('class', 'thresholds');\r\n\r\n        this.data.thresholds?.forEach(threshold => {\r\n            const percentage = (threshold.value - this.data.min) / (this.data.max - this.data.min);\r\n            const angle = startAngle + (endAngle - startAngle) * percentage;\r\n\r\n            const x1 = Math.cos(angle) * (radius - arcWidth - 5);\r\n            const y1 = Math.sin(angle) * (radius - arcWidth - 5);\r\n            const x2 = Math.cos(angle) * (radius + 5);\r\n            const y2 = Math.sin(angle) * (radius + 5);\r\n\r\n            thresholdGroup.append('line')\r\n                .attr('x1', x1)\r\n                .attr('y1', y1)\r\n                .attr('x2', x2)\r\n                .attr('y2', y2)\r\n                .attr('stroke', threshold.color)\r\n                .attr('stroke-width', 2)\r\n                .attr('opacity', 0.6);\r\n        });\r\n    }\r\n\r\n    private getColor(percentage: number): string {\r\n        if (percentage < 0.3) return '#ef4444';\r\n        if (percentage < 0.6) return '#f59e0b';\r\n        if (percentage < 0.8) return '#eab308';\r\n        return '#10b981';\r\n    }\r\n}\r\n",
            "styleUrl": "./gauge.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"gauge-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "Grid",
            "id": "component-Grid-4d5a4dccd409d52d1e1b2779653ea757185ffc854d2c697f956bf83088f5d22cde7961be2e68cbedeca03b3a21fc50f9aa244b9e6dcc2cc9d11a4e1abab0f968",
            "file": "src/components/base/grid/grid.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-grid",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./grid.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "height",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 25,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "opacity",
                    "defaultValue": "0.2",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 30,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "orientation",
                    "defaultValue": "'both'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 26,
                    "type": "GridOrientation",
                    "decorators": []
                },
                {
                    "name": "strokeDasharray",
                    "defaultValue": "'4,4'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 29,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "width",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 24,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "xScale",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 22,
                    "type": "d3.AxisScale<any>",
                    "decorators": []
                },
                {
                    "name": "xTicks",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 27,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "yScale",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 23,
                    "type": "d3.AxisScale<any>",
                    "decorators": []
                },
                {
                    "name": "yTicks",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 28,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "gridContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef<SVGGElement>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 20,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'gridContainer', {static: false}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                }
            ],
            "methodsClass": [
                {
                    "name": "ngAfterViewInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 34,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 38,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 32,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "renderGrid",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 44,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "renderHorizontalLines",
                    "args": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 78,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "renderVerticalLines",
                    "args": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 59,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "g",
                            "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport type GridOrientation = 'horizontal' | 'vertical' | 'both';\r\n\r\n@Component({\r\n    selector: 'app-grid',\r\n    standalone: true,\r\n    imports: [],\r\n    templateUrl: './grid.html',\r\n    styleUrl: './grid.css',\r\n})\r\nexport class Grid implements OnInit, AfterViewInit, OnChanges {\r\n\r\n    constructor(themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    @ViewChild('gridContainer', { static: false }) gridContainer!: ElementRef<SVGGElement>;\r\n\r\n    @Input() xScale!: d3.AxisScale<any>;\r\n    @Input() yScale!: d3.AxisScale<any>;\r\n    @Input() width!: number;\r\n    @Input() height!: number;\r\n    @Input() orientation: GridOrientation = 'both';\r\n    @Input() xTicks?: number;\r\n    @Input() yTicks?: number;\r\n    @Input() strokeDasharray: string = '4,4';\r\n    @Input() opacity: number = 0.2;\r\n\r\n    ngOnInit(): void { }\r\n\r\n    ngAfterViewInit(): void {\r\n        this.renderGrid();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (this.gridContainer) {\r\n            this.renderGrid();\r\n        }\r\n    }\r\n\r\n    private renderGrid(): void {\r\n        if (!this.gridContainer) return;\r\n\r\n        const g = d3.select(this.gridContainer.nativeElement);\r\n        g.selectAll('*').remove();\r\n\r\n        if (this.orientation === 'vertical' || this.orientation === 'both') {\r\n            this.renderVerticalLines(g);\r\n        }\r\n\r\n        if (this.orientation === 'horizontal' || this.orientation === 'both') {\r\n            this.renderHorizontalLines(g);\r\n        }\r\n    }\r\n\r\n    private renderVerticalLines(g: d3.Selection<SVGGElement, unknown, null, undefined>): void {\r\n        const tickValues = (this.xScale as any).ticks\r\n            ? (this.xScale as any).ticks(this.xTicks || 10)\r\n            : this.xScale.domain();\r\n\r\n        g.selectAll('.grid-line-vertical')\r\n            .data(tickValues)\r\n            .join('line')\r\n            .attr('class', 'grid-line-vertical')\r\n            .attr('x1', (d: any) => this.xScale(d)!)\r\n            .attr('x2', (d: any) => this.xScale(d)!)\r\n            .attr('y1', 0)\r\n            .attr('y2', this.height)\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('opacity', this.opacity)\r\n            .attr('stroke-dasharray', this.strokeDasharray);\r\n    }\r\n\r\n    private renderHorizontalLines(g: d3.Selection<SVGGElement, unknown, null, undefined>): void {\r\n        const tickValues = (this.yScale as any).ticks\r\n            ? (this.yScale as any).ticks(this.yTicks || 10)\r\n            : this.yScale.domain();\r\n\r\n        g.selectAll('.grid-line-horizontal')\r\n            .data(tickValues)\r\n            .join('line')\r\n            .attr('class', 'grid-line-horizontal')\r\n            .attr('x1', 0)\r\n            .attr('x2', this.width)\r\n            .attr('y1', (d: any) => this.yScale(d)!)\r\n            .attr('y2', (d: any) => this.yScale(d)!)\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1)\r\n            .attr('opacity', this.opacity)\r\n            .attr('stroke-dasharray', this.strokeDasharray);\r\n    }\r\n}\r\n",
            "styleUrl": "./grid.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 14,
                "jsdoctags": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "AfterViewInit",
                "OnChanges"
            ],
            "templateData": "<svg:g #gridContainer class=\"grid\"></svg:g>\r\n"
        },
        {
            "name": "Heatmap",
            "id": "component-Heatmap-e5fc9cd4c28d22dc4a74645cb8427b84189dfb3a79c329dc09dfeea62259c4e989b9dcd71500036b983239f49040f6a10f5e29dcb4e42dbe146b9e6d9d8b5deb",
            "file": "src/components/charts/heatmap/heatmap.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-heatmap",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./heatmap.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 29,
                    "type": "HeatmapConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 26,
                    "type": "HeatmapDataPoint[]",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 28,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 27,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 22,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 32,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 34,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "margin",
                    "defaultValue": "{ top: 60, right: 40, bottom: 80, left: 80 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 33,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 31,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 37
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 41
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 40
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 38
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 39
                }
            ],
            "methodsClass": [
                {
                    "name": "addAxes",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 176,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addCells",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleSequential<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 207,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleBand<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleSequential<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 79,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addLegend",
                    "args": [
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleSequential<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 316,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleSequential<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "getColorScale",
                    "args": [],
                    "optional": false,
                    "returnType": "d3.ScaleSequential<string>",
                    "typeParameters": [],
                    "line": 152,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 397,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 55,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 47,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 43,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataPoint",
                            "type": "HeatmapDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleSequential<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 370,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataPoint",
                            "type": "HeatmapDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleSequential<string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 125,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { HeatmapDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface HeatmapConfig {\r\n  showValues?: boolean;\r\n  animated?: boolean;\r\n  cellRadius?: number;\r\n  colorScheme?: 'blues' | 'greens' | 'reds' | 'purples' | 'viridis' | 'plasma';\r\n  customTooltip?: (data: { x: string | number; y: string | number; value: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-heatmap',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './heatmap.html',\r\n  styleUrl: './heatmap.css',\r\n})\r\nexport class Heatmap implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) { }\r\n\r\n  @Input() data: HeatmapDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: HeatmapConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 60, right: 40, bottom: 80, left: 80 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'heatmap-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'heatmap-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '100%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.4)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'heatmap-cell-shadow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 2);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 2)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.3);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const xValues = Array.from(new Set(this.data.map(d => String(d.x)))).sort();\r\n    const yValues = Array.from(new Set(this.data.map(d => String(d.y)))).sort();\r\n\r\n    const xScale = d3.scaleBand()\r\n      .domain(xValues)\r\n      .range([0, this.innerWidth])\r\n      .padding(0.05);\r\n\r\n    const yScale = d3.scaleBand()\r\n      .domain(yValues)\r\n      .range([0, this.innerHeight])\r\n      .padding(0.05);\r\n\r\n    const colorScale = this.getColorScale();\r\n\r\n    this.addAxes(xScale, yScale);\r\n\r\n    this.addCells(xScale, yScale, colorScale);\r\n\r\n    this.addLegend(colorScale);\r\n  }\r\n\r\n  private getColorScale(): d3.ScaleSequential<string> {\r\n    const values = this.data.map(d => d.value);\r\n    const extent = d3.extent(values) as [number, number];\r\n\r\n    const scheme = this.config.colorScheme || 'blues';\r\n\r\n    switch (scheme) {\r\n      case 'blues':\r\n        return d3.scaleSequential(d3.interpolateBlues).domain(extent);\r\n      case 'greens':\r\n        return d3.scaleSequential(d3.interpolateGreens).domain(extent);\r\n      case 'reds':\r\n        return d3.scaleSequential(d3.interpolateReds).domain(extent);\r\n      case 'purples':\r\n        return d3.scaleSequential(d3.interpolatePurples).domain(extent);\r\n      case 'viridis':\r\n        return d3.scaleSequential(d3.interpolateViridis).domain(extent);\r\n      case 'plasma':\r\n        return d3.scaleSequential(d3.interpolatePlasma).domain(extent);\r\n      default:\r\n        return d3.scaleSequential(d3.interpolateBlues).domain(extent);\r\n    }\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleBand<string>,\r\n    yScale: d3.ScaleBand<string>\r\n  ): void {\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(d3.axisBottom(xScale).tickSize(0))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)')\r\n      .style('text-anchor', 'end')\r\n      .attr('transform', 'rotate(-45)')\r\n      .attr('dx', '-0.8em')\r\n      .attr('dy', '0.15em');\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(d3.axisLeft(yScale).tickSize(0))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    this.chartGroup.selectAll('.tick line').remove();\r\n  }\r\n\r\n  private addCells(\r\n    xScale: d3.ScaleBand<string>,\r\n    yScale: d3.ScaleBand<string>,\r\n    colorScale: d3.ScaleSequential<string>\r\n  ): void {\r\n    const cellRadius = this.config.cellRadius ?? 4;\r\n    const cellsGroup = this.chartGroup.append('g').attr('class', 'cells');\r\n\r\n    const cells = cellsGroup.selectAll('.cell-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'cell-group');\r\n\r\n    cells.append('rect')\r\n      .attr('class', 'cell-shadow')\r\n      .attr('x', d => (xScale(String(d.x)) || 0) + 2)\r\n      .attr('y', d => (yScale(String(d.y)) || 0) + 2)\r\n      .attr('width', xScale.bandwidth())\r\n      .attr('height', yScale.bandwidth())\r\n      .attr('rx', cellRadius)\r\n      .attr('ry', cellRadius)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.1)');\r\n\r\n    cells.append('rect')\r\n      .attr('class', 'cell')\r\n      .attr('x', d => xScale(String(d.x)) || 0)\r\n      .attr('y', d => yScale(String(d.y)) || 0)\r\n      .attr('width', xScale.bandwidth())\r\n      .attr('height', yScale.bandwidth())\r\n      .attr('rx', cellRadius)\r\n      .attr('ry', cellRadius)\r\n      .attr('fill', d => d.color || colorScale(d.value))\r\n      .style('filter', 'url(#heatmap-cell-shadow)')\r\n      .attr('opacity', 0)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('opacity', 1);\r\n\r\n    cells.append('rect')\r\n      .attr('class', 'cell-glass')\r\n      .attr('x', d => xScale(String(d.x)) || 0)\r\n      .attr('y', d => yScale(String(d.y)) || 0)\r\n      .attr('width', xScale.bandwidth())\r\n      .attr('height', yScale.bandwidth())\r\n      .attr('rx', cellRadius)\r\n      .attr('ry', cellRadius)\r\n      .attr('fill', 'url(#heatmap-glass-gradient)')\r\n      .attr('pointer-events', 'none')\r\n      .attr('opacity', 0)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('opacity', 0.3);\r\n\r\n    cells.selectAll('.cell')\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(200)\r\n          .attr('opacity', 0.8)\r\n          .attr('stroke', '#fff')\r\n          .attr('stroke-width', 2);\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget)\r\n          .transition()\r\n          .duration(200)\r\n          .attr('opacity', 1)\r\n          .attr('stroke', 'none');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n\r\n    if (this.config.showValues) {\r\n      cells.append('text')\r\n        .attr('class', 'cell-value')\r\n        .attr('x', d => (xScale(String(d.x)) || 0) + xScale.bandwidth() / 2)\r\n        .attr('y', d => (yScale(String(d.y)) || 0) + yScale.bandwidth() / 2 + 4)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', d => {\r\n          const color = d3.color(d.color || colorScale(d.value));\r\n          const brightness = color ? (color as any).r * 0.299 + (color as any).g * 0.587 + (color as any).b * 0.114 : 128;\r\n          return brightness > 128 ? '#000' : '#fff';\r\n        })\r\n        .attr('font-size', 'var(--font-size-xs)')\r\n        .attr('font-weight', '600')\r\n        .style('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.3)')\r\n        .attr('opacity', 0)\r\n        .text(d => d.value.toFixed(1))\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 300)\r\n        .attr('opacity', 1);\r\n    }\r\n  }\r\n\r\n  private addLegend(colorScale: d3.ScaleSequential<string>): void {\r\n    const legendWidth = 20;\r\n    const legendHeight = 200;\r\n    const legendX = this.innerWidth + 20;\r\n    const legendY = (this.innerHeight - legendHeight) / 2;\r\n\r\n    const legendGroup = this.chartGroup.append('g')\r\n      .attr('class', 'legend')\r\n      .attr('transform', `translate(${legendX},${legendY})`);\r\n\r\n    const defs = this.svg.select('defs');\r\n    const legendGradient = defs.append('linearGradient')\r\n      .attr('id', 'legend-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '100%')\r\n      .attr('x2', '0%')\r\n      .attr('y2', '0%');\r\n\r\n    const domain = colorScale.domain();\r\n    const steps = 10;\r\n    for (let i = 0; i <= steps; i++) {\r\n      const value = domain[0] + (domain[1] - domain[0]) * (i / steps);\r\n      legendGradient.append('stop')\r\n        .attr('offset', `${(i / steps) * 100}%`)\r\n        .attr('stop-color', colorScale(value));\r\n    }\r\n\r\n    legendGroup.append('rect')\r\n      .attr('width', legendWidth)\r\n      .attr('height', legendHeight)\r\n      .attr('fill', 'url(#legend-gradient)')\r\n      .attr('rx', 4)\r\n      .style('filter', 'url(#heatmap-cell-shadow)');\r\n\r\n    const legendScale = d3.scaleLinear()\r\n      .domain(domain)\r\n      .range([legendHeight, 0]);\r\n\r\n    const legendAxis = d3.axisRight(legendScale)\r\n      .ticks(5);\r\n\r\n    legendGroup.append('g')\r\n      .attr('transform', `translate(${legendWidth},0)`)\r\n      .call(legendAxis)\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-xs)');\r\n\r\n    legendGroup.select('.domain').remove();\r\n    legendGroup.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('x2', 6);\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: HeatmapDataPoint, colorScale: d3.ScaleSequential<string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip({\r\n        x: dataPoint.x,\r\n        y: dataPoint.y,\r\n        value: dataPoint.value,\r\n        color: dataPoint.color || colorScale(dataPoint.value)\r\n      });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = `${dataPoint.x}, ${dataPoint.y}`;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: dataPoint.value.toFixed(2), color: dataPoint.color || colorScale(dataPoint.value) }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "styleUrl": "./heatmap.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 22,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"heatmap-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "Legend",
            "id": "component-Legend-254e23b7f9caa72fc8a63ff3d870e41b34543000c9918d254b64695f6312b567db9a9e127973894cb0b7f48fb082f024e47763aeb68cf1e546f52712cdf3b6e9",
            "file": "src/components/base/legend/legend.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-legend",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./legend.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "interactive",
                    "defaultValue": "true",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 31,
                    "type": "boolean",
                    "decorators": []
                },
                {
                    "name": "items",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 28,
                    "type": "LegendItem[]",
                    "decorators": []
                },
                {
                    "name": "orientation",
                    "defaultValue": "'horizontal'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 30,
                    "type": "LegendOrientation",
                    "decorators": []
                },
                {
                    "name": "position",
                    "defaultValue": "'bottom'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 29,
                    "type": "LegendPosition",
                    "decorators": []
                }
            ],
            "outputsClass": [
                {
                    "name": "itemClick",
                    "defaultValue": "new EventEmitter<LegendItem>()",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 33,
                    "type": "EventEmitter"
                },
                {
                    "name": "itemHover",
                    "defaultValue": "new EventEmitter<LegendItem | null>()",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 34,
                    "type": "EventEmitter"
                }
            ],
            "propertiesClass": [],
            "methodsClass": [
                {
                    "name": "getShapeClass",
                    "args": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "string",
                    "typeParameters": [],
                    "line": 54,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "isVisible",
                    "args": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "boolean",
                    "typeParameters": [],
                    "line": 58,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "onItemClick",
                    "args": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 36,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "onItemMouseEnter",
                    "args": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 42,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "item",
                            "type": "LegendItem",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "onItemMouseLeave",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 48,
                    "deprecated": false,
                    "deprecationMessage": ""
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "CommonModule",
                    "type": "module"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { CommonModule } from '@angular/common';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport interface LegendItem {\r\n    label: string;\r\n    color: string;\r\n    visible?: boolean;\r\n    shape?: 'circle' | 'square' | 'line' | 'rect';\r\n    value?: string | number;\r\n}\r\n\r\nexport type LegendPosition = 'top' | 'bottom' | 'left' | 'right';\r\nexport type LegendOrientation = 'horizontal' | 'vertical';\r\n\r\n@Component({\r\n    selector: 'app-legend',\r\n    standalone: true,\r\n    imports: [CommonModule],\r\n    templateUrl: './legend.html',\r\n    styleUrl: './legend.css',\r\n})\r\nexport class Legend {\r\n\r\n    constructor(themeService: ThemeService) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n    @Input() items: LegendItem[] = [];\r\n    @Input() position: LegendPosition = 'bottom';\r\n    @Input() orientation: LegendOrientation = 'horizontal';\r\n    @Input() interactive: boolean = true;\r\n\r\n    @Output() itemClick = new EventEmitter<LegendItem>();\r\n    @Output() itemHover = new EventEmitter<LegendItem | null>();\r\n\r\n    onItemClick(item: LegendItem): void {\r\n        if (this.interactive) {\r\n            this.itemClick.emit(item);\r\n        }\r\n    }\r\n\r\n    onItemMouseEnter(item: LegendItem): void {\r\n        if (this.interactive) {\r\n            this.itemHover.emit(item);\r\n        }\r\n    }\r\n\r\n    onItemMouseLeave(): void {\r\n        if (this.interactive) {\r\n            this.itemHover.emit(null);\r\n        }\r\n    }\r\n\r\n    getShapeClass(item: LegendItem): string {\r\n        return `legend-shape legend-shape-${item.shape || 'circle'}`;\r\n    }\r\n\r\n    isVisible(item: LegendItem): boolean {\r\n        return item.visible !== false;\r\n    }\r\n}\r\n",
            "styleUrl": "./legend.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 23,
                "jsdoctags": [
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "templateData": "<div class=\"legend-container\" [class.legend-horizontal]=\"orientation === 'horizontal'\"\r\n    [class.legend-vertical]=\"orientation === 'vertical'\" [class.legend-interactive]=\"interactive\"\r\n    [class]=\"'legend-' + position\" role=\"list\" aria-label=\"Chart legend\">\r\n\r\n    <div *ngFor=\"let item of items\" class=\"legend-item\" [class.legend-item-hidden]=\"item.visible === false\"\r\n        [class.legend-item-active]=\"isVisible(item)\" (click)=\"onItemClick(item)\" (mouseenter)=\"onItemMouseEnter(item)\"\r\n        (mouseleave)=\"onItemMouseLeave()\" role=\"listitem\"\r\n        [attr.aria-label]=\"item.label + (item.value ? ': ' + item.value : '')\">\r\n\r\n        <span [class]=\"getShapeClass(item)\"\r\n            [style.background-color]=\"(item.shape !== 'line' && item.shape !== 'rect') ? item.color : 'transparent'\"\r\n            [style.border-color]=\"item.color\" aria-hidden=\"true\">\r\n        </span>\r\n\r\n        <span class=\"legend-label-container\">\r\n            <span class=\"legend-label\">{{ item.label }}</span>\r\n            <span class=\"legend-value\" *ngIf=\"item.value\">{{ item.value }}</span>\r\n        </span>\r\n    </div>\r\n</div>\r\n"
        },
        {
            "name": "Line",
            "id": "component-Line-cb0eacc9ec279a2a4a0cacb63b63264789c44295348fe22cf3961b718ebbfce6b502ab1eac5658f22c6804cd5581f00d594d772c8a18babe714fb0a6e6fc587c",
            "file": "src/components/charts/line/line.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-line",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./line.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 33,
                    "type": "LineChartConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 30,
                    "type": "TimeSeriesDataPoint[] | Record<string | TimeSeriesDataPoint[]>",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 32,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 31,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 26,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 36,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 39,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 38,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "margin",
                    "defaultValue": "{ top: 40, right: 40, bottom: 60, left: 60 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 37,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 41
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 45
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 44
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 42
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 43
                }
            ],
            "methodsClass": [
                {
                    "name": "addAxes",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 191,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 83,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addGrid",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 158,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addHoverOverlay",
                    "args": [
                        {
                            "name": "seriesData",
                            "type": "Record<string | TimeSeriesDataPoint[]>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 340,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "seriesData",
                            "type": "Record<string | TimeSeriesDataPoint[]>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addLine",
                    "args": [
                        {
                            "name": "data",
                            "type": "TimeSeriesDataPoint[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "index",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 220,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "data",
                            "type": "TimeSeriesDataPoint[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "xScale",
                            "type": "d3.ScaleTime<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "index",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 501,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 59,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 51,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 47,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "sanitizeClassName",
                    "args": [
                        {
                            "name": "name",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "string",
                    "typeParameters": [],
                    "line": 336,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "name",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "showMultiSeriesTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "points",
                            "type": "Array<literal type>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 470,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "points",
                            "type": "Array<literal type>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataPoint",
                            "type": "TimeSeriesDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 448,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataPoint",
                            "type": "TimeSeriesDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "seriesName",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 119,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { TimeSeriesDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface LineChartConfig {\r\n  showGrid?: boolean;\r\n  showPoints?: boolean;\r\n  showArea?: boolean;\r\n  curved?: boolean;\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  lineWidth?: number;\r\n  multiSeries?: boolean;\r\n  customTooltip?: (data: { date: Date; value: number; seriesName?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-line',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './line.html',\r\n  styleUrl: './line.css',\r\n})\r\nexport class Line implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) { }\r\n\r\n  @Input() data: TimeSeriesDataPoint[] | Record<string, TimeSeriesDataPoint[]> = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: LineChartConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'line-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const areaGradient = defs.append('linearGradient')\r\n      .attr('id', 'line-area-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '0%')\r\n      .attr('y2', '100%');\r\n\r\n    areaGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'var(--color-primary)')\r\n      .attr('stop-opacity', 0.4);\r\n\r\n    areaGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'var(--color-primary)')\r\n      .attr('stop-opacity', 0);\r\n\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'line-glow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 3)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || (Array.isArray(this.data) && this.data.length === 0)) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const isMultiSeries = !Array.isArray(this.data);\r\n    const seriesData: Record<string, TimeSeriesDataPoint[]> = isMultiSeries\r\n      ? this.data as Record<string, TimeSeriesDataPoint[]>\r\n      : { 'Series 1': this.data as TimeSeriesDataPoint[] };\r\n\r\n    const allData = Object.values(seriesData).flat();\r\n\r\n    const xScale = d3.scaleTime()\r\n      .domain(d3.extent(allData, d => d.date) as [Date, Date])\r\n      .range([0, this.innerWidth]);\r\n\r\n    const yScale = d3.scaleLinear()\r\n      .domain([0, d3.max(allData, d => d.value) || 0])\r\n      .nice()\r\n      .range([this.innerHeight, 0]);\r\n\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(Object.keys(seriesData))\r\n      .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444']);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(xScale, yScale);\r\n    }\r\n\r\n    this.addAxes(xScale, yScale);\r\n\r\n    Object.entries(seriesData).forEach(([seriesName, data], index) => {\r\n      this.addLine(data, xScale, yScale, colorScale(seriesName), index, seriesName);\r\n    });\r\n\r\n    // Add hover overlay for better tooltip interaction\r\n    this.addHoverOverlay(seriesData, xScale, yScale, colorScale);\r\n  }\r\n\r\n  private addGrid(\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    gridGroup.selectAll('.grid-line-y')\r\n      .data(yScale.ticks(5))\r\n      .join('line')\r\n      .attr('class', 'grid-line-y')\r\n      .attr('x1', 0)\r\n      .attr('x2', this.innerWidth)\r\n      .attr('y1', d => yScale(d))\r\n      .attr('y2', d => yScale(d))\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1)\r\n      .attr('stroke-dasharray', '4,4')\r\n      .attr('opacity', 0.2);\r\n\r\n    gridGroup.selectAll('.grid-line-x')\r\n      .data(xScale.ticks(5))\r\n      .join('line')\r\n      .attr('class', 'grid-line-x')\r\n      .attr('x1', d => xScale(d))\r\n      .attr('x2', d => xScale(d))\r\n      .attr('y1', 0)\r\n      .attr('y2', this.innerHeight)\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1)\r\n      .attr('stroke-dasharray', '4,4')\r\n      .attr('opacity', 0.2);\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(d3.axisBottom(xScale).ticks(5))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(d3.axisLeft(yScale).ticks(5))\r\n      .selectAll('text')\r\n      .attr('fill', 'var(--color-text)')\r\n      .attr('font-size', 'var(--font-size-sm)');\r\n\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 2)\r\n      .attr('opacity', 0.6);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('opacity', 0.5);\r\n  }\r\n\r\n  private addLine(\r\n    data: TimeSeriesDataPoint[],\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    color: string,\r\n    index: number,\r\n    seriesName: string\r\n  ): void {\r\n    const lineGroup = this.chartGroup.append('g')\r\n      .attr('class', `line-group-${index}`);\r\n\r\n    const lineGenerator = this.config.curved !== false\r\n      ? d3.line<TimeSeriesDataPoint>()\r\n        .x(d => xScale(d.date))\r\n        .y(d => yScale(d.value))\r\n        .curve(d3.curveMonotoneX)\r\n      : d3.line<TimeSeriesDataPoint>()\r\n        .x(d => xScale(d.date))\r\n        .y(d => yScale(d.value));\r\n\r\n    if (this.config.showArea) {\r\n      const areaGenerator = this.config.curved !== false\r\n        ? d3.area<TimeSeriesDataPoint>()\r\n          .x(d => xScale(d.date))\r\n          .y0(this.innerHeight)\r\n          .y1(d => yScale(d.value))\r\n          .curve(d3.curveMonotoneX)\r\n        : d3.area<TimeSeriesDataPoint>()\r\n          .x(d => xScale(d.date))\r\n          .y0(this.innerHeight)\r\n          .y1(d => yScale(d.value));\r\n\r\n      const areaPath = lineGroup.append('path')\r\n        .datum(data)\r\n        .attr('class', 'line-area')\r\n        .attr('d', areaGenerator)\r\n        .attr('fill', color)\r\n        .attr('opacity', 0.2);\r\n\r\n      if (this.config.animated !== false) {\r\n        const totalLength = (areaPath.node() as any)?.getTotalLength() || 0;\r\n        areaPath\r\n          .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\r\n          .attr('stroke-dashoffset', totalLength)\r\n          .transition()\r\n          .duration(1000)\r\n          .delay(index * 200)\r\n          .attr('stroke-dashoffset', 0)\r\n          .attr('stroke-dasharray', 'none');\r\n      }\r\n    }\r\n\r\n    const linePath = lineGroup.append('path')\r\n      .datum(data)\r\n      .attr('class', 'line-path')\r\n      .attr('d', lineGenerator)\r\n      .attr('fill', 'none')\r\n      .attr('stroke', color)\r\n      .attr('stroke-width', this.config.lineWidth || 3)\r\n      .attr('stroke-linecap', 'round')\r\n      .attr('stroke-linejoin', 'round')\r\n      .style('filter', 'url(#line-glow)');\r\n\r\n    if (this.config.animated !== false) {\r\n      const totalLength = (linePath.node() as any)?.getTotalLength() || 0;\r\n      linePath\r\n        .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\r\n        .attr('stroke-dashoffset', totalLength)\r\n        .transition()\r\n        .duration(1000)\r\n        .delay(index * 200)\r\n        .attr('stroke-dashoffset', 0);\r\n    }\r\n\r\n    if (this.config.showPoints !== false) {\r\n      lineGroup.selectAll('.line-point')\r\n        .data(data)\r\n        .join('circle')\r\n        .attr('class', 'line-point')\r\n        .attr('cx', d => xScale(d.date))\r\n        .attr('cy', d => yScale(d.value))\r\n        .attr('r', 0)\r\n        .attr('fill', color)\r\n        .attr('stroke', '#fff')\r\n        .attr('stroke-width', 2)\r\n        .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))')\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 400 : 0)\r\n        .delay((_, i) => (this.config.animated !== false ? index * 200 + 800 + i * 30 : 0))\r\n        .attr('r', 5);\r\n\r\n      lineGroup.selectAll('.line-point')\r\n        .on('mouseenter', (event, d: any) => {\r\n          d3.select(event.currentTarget)\r\n            .transition()\r\n            .duration(200)\r\n            .attr('r', 7)\r\n            .attr('stroke-width', 3);\r\n\r\n          this.ngZone.run(() => {\r\n            this.showTooltip(event, d, seriesName, color);\r\n          });\r\n        })\r\n        .on('mouseleave', (event) => {\r\n          d3.select(event.currentTarget)\r\n            .transition()\r\n            .duration(200)\r\n            .attr('r', 5)\r\n            .attr('stroke-width', 2);\r\n\r\n          this.ngZone.run(() => {\r\n            this.hideTooltip();\r\n          });\r\n        });\r\n    }\r\n  }\r\n  private sanitizeClassName(name: string): string {\r\n    return name.replace(/[^a-zA-Z0-9-_]/g, '-');\r\n  }\r\n\r\n  private addHoverOverlay(\r\n    seriesData: Record<string, TimeSeriesDataPoint[]>,\r\n    xScale: d3.ScaleTime<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    const overlay = this.chartGroup\r\n      .append('rect')\r\n      .attr('class', 'hover-overlay')\r\n      .attr('width', this.innerWidth)\r\n      .attr('height', this.innerHeight)\r\n      .attr('fill', 'none')\r\n      .attr('pointer-events', 'all')\r\n      .style('cursor', 'crosshair');\r\n\r\n    // Create vertical line for hover\r\n    const hoverLine = this.chartGroup\r\n      .append('line')\r\n      .attr('class', 'hover-line')\r\n      .attr('stroke', 'var(--color-border)')\r\n      .attr('stroke-width', 1)\r\n      .attr('stroke-dasharray', '4,4')\r\n      .attr('opacity', 0)\r\n      .attr('pointer-events', 'none');\r\n\r\n    // Create hover circles for each series\r\n    const hoverCircles = this.chartGroup\r\n      .append('g')\r\n      .attr('class', 'hover-circles')\r\n      .attr('pointer-events', 'none');\r\n\r\n    Object.entries(seriesData).forEach(([seriesName]) => {\r\n      hoverCircles\r\n        .append('circle')\r\n        .attr('class', `hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n        .attr('r', 5)\r\n        .attr('fill', colorScale(seriesName))\r\n        .attr('stroke', '#fff')\r\n        .attr('stroke-width', 2)\r\n        .attr('opacity', 0)\r\n        .style('filter', 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))');\r\n    });\r\n\r\n    overlay\r\n      .on('mousemove', (event) => {\r\n        const [mouseX] = d3.pointer(event);\r\n        const hoveredDate = xScale.invert(mouseX);\r\n\r\n        // Find closest data points for each series\r\n        const closestPoints: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }> = [];\r\n\r\n        Object.entries(seriesData).forEach(([seriesName, data]) => {\r\n          const bisect = d3.bisector<TimeSeriesDataPoint, Date>(d => d.date).left;\r\n          const index = bisect(data, hoveredDate);\r\n\r\n          const d0 = data[index - 1];\r\n          const d1 = data[index];\r\n\r\n          let closest = d0;\r\n          if (d1 && d0) {\r\n            closest = hoveredDate.getTime() - d0.date.getTime() > d1.date.getTime() - hoveredDate.getTime() ? d1 : d0;\r\n          } else if (d1) {\r\n            closest = d1;\r\n          }\r\n\r\n          if (closest) {\r\n            const distance = Math.abs(xScale(closest.date) - mouseX);\r\n            closestPoints.push({ seriesName, point: closest, distance });\r\n          }\r\n        });\r\n\r\n        if (closestPoints.length > 0) {\r\n          // Sort by distance and take the closest one for positioning\r\n          closestPoints.sort((a, b) => a.distance - b.distance);\r\n          const mainPoint = closestPoints[0];\r\n\r\n          // Show vertical line\r\n          hoverLine\r\n            .attr('x1', xScale(mainPoint.point.date))\r\n            .attr('x2', xScale(mainPoint.point.date))\r\n            .attr('y1', 0)\r\n            .attr('y2', this.innerHeight)\r\n            .attr('opacity', 0.6);\r\n\r\n          // Show circles for all series\r\n          closestPoints.forEach(({ seriesName, point }) => {\r\n            hoverCircles\r\n              .select(`.hover-circle-${this.sanitizeClassName(seriesName)}`)\r\n              .attr('cx', xScale(point.date))\r\n              .attr('cy', yScale(point.value))\r\n              .attr('opacity', 1);\r\n          });\r\n\r\n          // Show tooltip with all series data\r\n          this.ngZone.run(() => {\r\n            this.showMultiSeriesTooltip(event, closestPoints, colorScale);\r\n          });\r\n        }\r\n      })\r\n      .on('mouseleave', () => {\r\n        hoverLine.attr('opacity', 0);\r\n        hoverCircles.selectAll('circle').attr('opacity', 0);\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: TimeSeriesDataPoint, seriesName: string, color: string): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip({ date: dataPoint.date, value: dataPoint.value, seriesName });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = seriesName;\r\n      this.tooltipData = [\r\n        { label: 'Date', value: dataPoint.date.toLocaleDateString() },\r\n        { label: 'Value', value: dataPoint.value.toFixed(2), color }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n  }\r\n\r\n  private showMultiSeriesTooltip(\r\n    event: MouseEvent,\r\n    points: Array<{ seriesName: string; point: TimeSeriesDataPoint; distance: number; }>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    if (this.config.customTooltip && points.length > 0) {\r\n      const customData = this.config.customTooltip({\r\n        date: points[0].point.date,\r\n        value: points[0].point.value,\r\n        seriesName: points[0].seriesName\r\n      });\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = points[0].point.date.toLocaleDateString();\r\n      this.tooltipData = points.map(({ seriesName, point }) => ({\r\n        label: seriesName,\r\n        value: point.value.toFixed(2),\r\n        color: colorScale(seriesName)\r\n      }));\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "styleUrl": "./line.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 26,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"line-chart-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "Pie",
            "id": "component-Pie-0aafc65360270c6efe415c2703855ae12c56821687a8cd1f13ef8d7fcf3b8681e4d7934f95e73c541ebc5edacdca9d0d2da98063c48df04919cf574434677dbb",
            "file": "src/components/charts/pie/pie.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-pie",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./pie.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 30,
                    "type": "PieChartConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 27,
                    "type": "ChartDataPoint[]",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 29,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 28,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 25,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 33,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 32,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 39
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 38
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 36
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 37
                }
            ],
            "methodsClass": [
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 76,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addLabels",
                    "args": [
                        {
                            "name": "slices",
                            "type": "d3.Selection<SVGGElement | d3.PieArcDatum<ChartDataPoint> | SVGGElement | unknown>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "arc",
                            "type": "d3.Arc<any | d3.PieArcDatum<ChartDataPoint>>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "outerArc",
                            "type": "d3.Arc<any | d3.PieArcDatum<ChartDataPoint>>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "pieData",
                            "type": "d3.PieArcDatum<ChartDataPoint>[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 266,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "slices",
                            "type": "d3.Selection<SVGGElement | d3.PieArcDatum<ChartDataPoint> | SVGGElement | unknown>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "arc",
                            "type": "d3.Arc<any | d3.PieArcDatum<ChartDataPoint>>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "outerArc",
                            "type": "d3.Arc<any | d3.PieArcDatum<ChartDataPoint>>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "pieData",
                            "type": "d3.PieArcDatum<ChartDataPoint>[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 370,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 55,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 47,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 43,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataPoint",
                            "type": "ChartDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "total",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 340,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataPoint",
                            "type": "ChartDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "total",
                            "type": "number",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "color",
                            "type": "string",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 119,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ChartDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface PieChartConfig {\r\n    showLabels?: boolean;\r\n    showPercentages?: boolean;\r\n    animated?: boolean;\r\n    innerRadius?: number;\r\n    padAngle?: number;\r\n    cornerRadius?: number;\r\n    colors?: string[];\r\n    customTooltip?: (data: { label: string; value: number; percentage: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n    selector: 'app-pie',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './pie.html',\r\n    styleUrl: './pie.css',\r\n})\r\nexport class Pie implements OnInit, OnChanges {\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: ChartDataPoint[] = [];\r\n    @Input() width: number = 500;\r\n    @Input() height: number = 500;\r\n    @Input() config: PieChartConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n\r\n    constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) { }\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'pie-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.width / 2},${this.height / 2})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Glass gradient\r\n        const glassGradient = defs.append('radialGradient')\r\n            .attr('id', 'pie-glass-gradient');\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '0%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0.6)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        glassGradient.append('stop')\r\n            .attr('offset', '100%')\r\n            .attr('stop-color', 'rgba(255, 255, 255, 0)')\r\n            .attr('stop-opacity', 1);\r\n\r\n        // 3D shadow\r\n        const shadow = defs.append('filter')\r\n            .attr('id', 'pie-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 4);\r\n\r\n        shadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 4);\r\n\r\n        shadow.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const feMerge = shadow.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        if (!this.data || this.data.length === 0) return;\r\n\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        const radius = Math.min(this.width, this.height) / 2 - 60;\r\n        const innerRadius = this.config.innerRadius ?? 0;\r\n\r\n        // Color scale\r\n        const colorScale = d3.scaleOrdinal<string>()\r\n            .domain(this.data.map(d => d.label))\r\n            .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4', '#f97316']);\r\n\r\n        // Pie layout\r\n        const pie = d3.pie<ChartDataPoint>()\r\n            .value(d => d.value)\r\n            .sort(null)\r\n            .padAngle(this.config.padAngle ?? 0.02);\r\n\r\n        // Arc generator\r\n        const arc = d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n            .innerRadius(innerRadius)\r\n            .outerRadius(radius)\r\n            .cornerRadius(this.config.cornerRadius ?? 4);\r\n\r\n        // Outer arc for labels\r\n        const outerArc = d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n            .innerRadius(radius + 20)\r\n            .outerRadius(radius + 20);\r\n\r\n        // Create slices\r\n        const slices = this.chartGroup.selectAll('.slice-group')\r\n            .data(pie(this.data))\r\n            .join('g')\r\n            .attr('class', 'slice-group');\r\n\r\n        // Shadow slices\r\n        slices.append('path')\r\n            .attr('class', 'slice-shadow')\r\n            .attr('d', arc as any)\r\n            .attr('transform', 'translate(0, 4)')\r\n            .attr('fill', 'rgba(0, 0, 0, 0.2)');\r\n\r\n        // Main slices\r\n        const slicePaths = slices.append('path')\r\n            .attr('class', 'slice')\r\n            .attr('fill', d => d.data.color || colorScale(d.data.label))\r\n            .style('filter', 'url(#pie-shadow)')\r\n            .style('cursor', 'pointer');\r\n\r\n        if (this.config.animated !== false) {\r\n            slicePaths\r\n                .attr('d', d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n                    .innerRadius(innerRadius)\r\n                    .outerRadius(0)\r\n                    .cornerRadius(this.config.cornerRadius ?? 4) as any)\r\n                .transition()\r\n                .duration(800)\r\n                .delay((_, i) => i * 100)\r\n                .attrTween('d', function (d: any) {\r\n                    const interpolate = d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);\r\n                    return function (t: number) {\r\n                        return arc(interpolate(t) as any)!;\r\n                    };\r\n                });\r\n        } else {\r\n            slicePaths.attr('d', arc as any);\r\n        }\r\n\r\n        // Glass overlay\r\n        slices.append('path')\r\n            .attr('class', 'slice-glass')\r\n            .attr('d', arc as any)\r\n            .attr('fill', 'url(#pie-glass-gradient)')\r\n            .attr('pointer-events', 'none')\r\n            .attr('opacity', 0.3);\r\n\r\n        // Add hover effects\r\n        const cornerRadius = this.config.cornerRadius ?? 4;\r\n        const total = d3.sum(this.data, d => d.value);\r\n\r\n        // Attach event handlers to the slice path for better control\r\n        slicePaths\r\n            .style('cursor', 'pointer')\r\n            .on('mouseenter', (event: any, d: any) => {\r\n                const element = event.currentTarget;\r\n                const arcTween = d3.arc<d3.PieArcDatum<ChartDataPoint>>()\r\n                    .innerRadius(innerRadius)\r\n                    .outerRadius(radius + 10)\r\n                    .cornerRadius(cornerRadius);\r\n\r\n                d3.select(element)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('d', arcTween as any);\r\n\r\n                this.ngZone.run(() => {\r\n                    this.showTooltip(event, d.data, total, d.data.color || colorScale(d.data.label));\r\n                });\r\n            })\r\n            .on('mousemove', (event) => {\r\n                this.ngZone.run(() => {\r\n                    this.tooltipX = event.clientX;\r\n                    this.tooltipY = event.clientY;\r\n                });\r\n            })\r\n            .on('mouseleave', (event: any, d: any) => {\r\n                d3.select(event.currentTarget)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('d', arc as any);\r\n\r\n                this.ngZone.run(() => {\r\n                    this.hideTooltip();\r\n                });\r\n            });\r\n\r\n        // Add labels if enabled\r\n        if (this.config.showLabels !== false) {\r\n            this.addLabels(slices as d3.Selection<SVGGElement, d3.PieArcDatum<ChartDataPoint>, SVGGElement, unknown>, arc, outerArc, pie(this.data));\r\n        }\r\n\r\n        // Add center text for donut chart\r\n        if (innerRadius > 0) {\r\n            const total = d3.sum(this.data, d => d.value);\r\n\r\n            this.chartGroup.append('text')\r\n                .attr('class', 'donut-total-label')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '-0.3em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', 'var(--font-size-sm)')\r\n                .attr('opacity', 0.7)\r\n                .text('Total');\r\n\r\n            this.chartGroup.append('text')\r\n                .attr('class', 'donut-total-value')\r\n                .attr('text-anchor', 'middle')\r\n                .attr('dy', '1.2em')\r\n                .attr('fill', 'var(--color-text)')\r\n                .attr('font-size', 'var(--font-size-xl)')\r\n                .attr('font-weight', '700')\r\n                .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.1)')\r\n                .text(total.toLocaleString());\r\n        }\r\n    }\r\n\r\n    private addLabels(\r\n        slices: d3.Selection<SVGGElement, d3.PieArcDatum<ChartDataPoint>, SVGGElement, unknown>,\r\n        arc: d3.Arc<any, d3.PieArcDatum<ChartDataPoint>>,\r\n        outerArc: d3.Arc<any, d3.PieArcDatum<ChartDataPoint>>,\r\n        pieData: d3.PieArcDatum<ChartDataPoint>[]\r\n    ): void {\r\n        const total = d3.sum(this.data, d => d.value);\r\n\r\n        // Add polylines\r\n        slices.append('polyline')\r\n            .attr('class', 'label-line')\r\n            .attr('points', d => {\r\n                const pos = outerArc.centroid(d);\r\n                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\r\n                pos[0] = (Math.min(this.width, this.height) / 2 - 30) * (midAngle < Math.PI ? 1 : -1);\r\n                return [arc.centroid(d), outerArc.centroid(d), pos].map(p => p.join(',')).join(' ');\r\n            })\r\n            .attr('stroke', 'var(--color-border)')\r\n            .attr('stroke-width', 1.5)\r\n            .attr('fill', 'none')\r\n            .attr('opacity', 0.6)\r\n            .attr('pointer-events', 'none');\r\n\r\n        // Add labels\r\n        const labels = slices.append('text')\r\n            .attr('class', 'slice-label')\r\n            .attr('transform', d => {\r\n                const pos = outerArc.centroid(d);\r\n                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\r\n                pos[0] = (Math.min(this.width, this.height) / 2 - 20) * (midAngle < Math.PI ? 1 : -1);\r\n                return `translate(${pos})`;\r\n            })\r\n            .attr('text-anchor', d => {\r\n                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\r\n                return midAngle < Math.PI ? 'start' : 'end';\r\n            })\r\n            .attr('fill', 'var(--color-text)')\r\n            .attr('font-size', 'var(--font-size-sm)')\r\n            .attr('font-weight', '600')\r\n            .style('text-shadow', '0 1px 2px rgba(255, 255, 255, 0.8)')\r\n            .attr('pointer-events', 'none');\r\n\r\n        labels.append('tspan')\r\n            .attr('x', 0)\r\n            .attr('dy', '0em')\r\n            .text(d => d.data.label);\r\n\r\n        if (this.config.showPercentages !== false) {\r\n            labels.append('tspan')\r\n                .attr('x', 0)\r\n                .attr('dy', '1.2em')\r\n                .attr('opacity', 0.7)\r\n                .attr('font-size', 'var(--font-size-xs)')\r\n                .text(d => `${((d.data.value / total) * 100).toFixed(1)}%`);\r\n        }\r\n\r\n        // Animate labels\r\n        if (this.config.animated !== false) {\r\n            labels\r\n                .attr('opacity', 0)\r\n                .transition()\r\n                .duration(400)\r\n                .delay((_, i) => i * 100 + 800)\r\n                .attr('opacity', 1);\r\n\r\n            slices.selectAll('.label-line')\r\n                .attr('opacity', 0)\r\n                .transition()\r\n                .duration(400)\r\n                .delay((_, i) => i * 100 + 800)\r\n                .attr('opacity', 0.6);\r\n        }\r\n    }\r\n\r\n    private showTooltip(event: MouseEvent, dataPoint: ChartDataPoint, total: number, color: string): void {\r\n        const percentage = (dataPoint.value / total) * 100;\r\n\r\n        if (this.config.customTooltip) {\r\n            const customData = this.config.customTooltip({\r\n                label: dataPoint.label,\r\n                value: dataPoint.value,\r\n                percentage,\r\n                color\r\n            });\r\n            this.tooltipTitle = customData.title || '';\r\n            this.tooltipData = customData.items.map(item => ({\r\n                label: item.label,\r\n                value: item.value,\r\n                color: item.color\r\n            }));\r\n        } else {\r\n            this.tooltipTitle = dataPoint.label;\r\n            this.tooltipData = [\r\n                { label: 'Value', value: dataPoint.value.toLocaleString(), color },\r\n                { label: 'Percentage', value: `${percentage.toFixed(1)}%` }\r\n            ];\r\n        }\r\n\r\n        this.tooltipX = event.clientX;\r\n        this.tooltipY = event.clientY;\r\n        this.tooltipVisible = true;\r\n        this.cdr.detectChanges();\r\n    }\r\n\r\n    private hideTooltip(): void {\r\n        this.tooltipVisible = false;\r\n        this.cdr.detectChanges();\r\n    }\r\n}\r\n",
            "styleUrl": "./pie.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 39,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"pie-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "Scatter",
            "id": "component-Scatter-bd8ea6092b23c3f0dc7215520a9f71c76106e2c3daccfebeece2e1becc02071b135a1d4faa38393216e0f9a0803e459d0699f568a0fac778b1ceacbba0748d82",
            "file": "src/components/charts/scatter/scatter.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-scatter",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./scatter.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 44,
                    "type": "ScatterChartConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 41,
                    "type": "ScatterDataPoint[]",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 43,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 42,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 47,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerHeight",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 50,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "innerWidth",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 49,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "margin",
                    "defaultValue": "{ top: 40, right: 40, bottom: 60, left: 60 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 48,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 46,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 53
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 57
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 56
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 54
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 55
                },
                {
                    "name": "zoomBehavior",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.ZoomBehavior<SVGSVGElement | unknown>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 51,
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "methodsClass": [
                {
                    "name": "addAxes",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 247,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addBubbles",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "sizeScale",
                            "type": "ReturnType<unknown<number, number>>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 305,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "sizeScale",
                            "type": "ReturnType<unknown<number, number>>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 99,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "addGrid",
                    "args": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 216,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "xScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "yScale",
                            "type": "d3.ScaleLinear<number | number>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 428,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 71,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 63,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 59,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "setupZoom",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 167,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataPoint",
                            "type": "ScatterDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 402,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataPoint",
                            "type": "ScatterDataPoint",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "colorScale",
                            "type": "d3.ScaleOrdinal<string | string>",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 177,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface ScatterDataPoint {\r\n  x: number;\r\n  y: number;\r\n  size?: number;\r\n  label?: string;\r\n  color?: string;\r\n  category?: string;\r\n}\r\n\r\nexport interface ScatterChartConfig {\r\n  showGrid?: boolean;\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  minBubbleSize?: number;\r\n  maxBubbleSize?: number;\r\n  enableZoom?: boolean;\r\n  xAxisLabel?: string;\r\n  yAxisLabel?: string;\r\n  customTooltip?: (data: ScatterDataPoint) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-scatter',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './scatter.html',\r\n  styleUrl: './scatter.css',\r\n})\r\nexport class Scatter implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data: ScatterDataPoint[] = [];\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: ScatterChartConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n  private margin = { top: 40, right: 40, bottom: 60, left: 60 };\r\n  private innerWidth!: number;\r\n  private innerHeight!: number;\r\n  private zoomBehavior!: d3.ZoomBehavior<SVGSVGElement, unknown>;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    this.innerWidth = this.width - this.margin.left - this.margin.right;\r\n    this.innerHeight = this.height - this.margin.top - this.margin.bottom;\r\n\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'scatter-chart-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group')\r\n      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);\r\n\r\n    if (this.config.enableZoom) {\r\n      this.setupZoom();\r\n    }\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    // Glass gradient for bubbles\r\n    const glassGradient = defs.append('radialGradient')\r\n      .attr('id', 'scatter-glass-gradient')\r\n      .attr('cx', '30%')\r\n      .attr('cy', '30%')\r\n      .attr('r', '70%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.9)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '50%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.5)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.1)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    // 3D shadow filter\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'scatter-3d-shadow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 4);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 4)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.3);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    // Glow effect\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'scatter-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 6)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private setupZoom(): void {\r\n    this.zoomBehavior = d3.zoom<SVGSVGElement, unknown>()\r\n      .scaleExtent([0.5, 5])\r\n      .on('zoom', (event) => {\r\n        this.chartGroup.attr('transform', event.transform);\r\n      });\r\n\r\n    this.svg.call(this.zoomBehavior as any);\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data || this.data.length === 0) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const xExtent = d3.extent(this.data, d => d.x) as [number, number];\r\n    const yExtent = d3.extent(this.data, d => d.y) as [number, number];\r\n\r\n    const xScale = d3.scaleLinear()\r\n      .domain([xExtent[0] * 0.9, xExtent[1] * 1.1])\r\n      .range([0, this.innerWidth])\r\n      .nice();\r\n\r\n    const yScale = d3.scaleLinear()\r\n      .domain([yExtent[0] * 0.9, yExtent[1] * 1.1])\r\n      .range([this.innerHeight, 0])\r\n      .nice();\r\n\r\n    const sizeExtent = d3.extent(this.data, d => d.size || 1) as [number, number];\r\n    const sizeScale = d3.scaleSqrt()\r\n      .domain(sizeExtent)\r\n      .range([this.config.minBubbleSize || 4, this.config.maxBubbleSize || 20]);\r\n\r\n    const categories = Array.from(new Set(this.data.map(d => d.category || 'default')));\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(categories)\r\n      .range(this.config.colors || [\r\n        '#0071e3', '#8e44ff', '#ff2d55', '#34c759',\r\n        '#ff9f0a', '#5ac8fa', '#af52de', '#ff3b30'\r\n      ]);\r\n\r\n    if (this.config.showGrid !== false) {\r\n      this.addGrid(xScale, yScale);\r\n    }\r\n\r\n    this.addAxes(xScale, yScale);\r\n    this.addBubbles(xScale, yScale, sizeScale, colorScale);\r\n  }\r\n\r\n  private addGrid(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    const gridGroup = this.chartGroup.append('g').attr('class', 'grid');\r\n\r\n    // Vertical grid lines\r\n    gridGroup.selectAll('.grid-line-x')\r\n      .data(xScale.ticks(10))\r\n      .join('line')\r\n      .attr('class', 'grid-line-x')\r\n      .attr('x1', d => xScale(d))\r\n      .attr('x2', d => xScale(d))\r\n      .attr('y1', 0)\r\n      .attr('y2', this.innerHeight)\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.05)')\r\n      .attr('stroke-width', 1);\r\n\r\n    // Horizontal grid lines\r\n    gridGroup.selectAll('.grid-line-y')\r\n      .data(yScale.ticks(10))\r\n      .join('line')\r\n      .attr('class', 'grid-line-y')\r\n      .attr('x1', 0)\r\n      .attr('x2', this.innerWidth)\r\n      .attr('y1', d => yScale(d))\r\n      .attr('y2', d => yScale(d))\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.05)')\r\n      .attr('stroke-width', 1);\r\n  }\r\n\r\n  private addAxes(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>\r\n  ): void {\r\n    // X axis\r\n    const xAxis = d3.axisBottom(xScale).ticks(10);\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'x-axis')\r\n      .attr('transform', `translate(0,${this.innerHeight})`)\r\n      .call(xAxis)\r\n      .selectAll('text')\r\n      .attr('fill', '#1d1d1f')\r\n      .attr('font-size', '13px');\r\n\r\n    // Y axis\r\n    const yAxis = d3.axisLeft(yScale).ticks(10);\r\n    this.chartGroup.append('g')\r\n      .attr('class', 'y-axis')\r\n      .call(yAxis)\r\n      .selectAll('text')\r\n      .attr('fill', '#1d1d1f')\r\n      .attr('font-size', '13px');\r\n\r\n    // Axis labels\r\n    if (this.config.xAxisLabel) {\r\n      this.chartGroup.append('text')\r\n        .attr('class', 'x-axis-label')\r\n        .attr('x', this.innerWidth / 2)\r\n        .attr('y', this.innerHeight + 45)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', '#1d1d1f')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .text(this.config.xAxisLabel);\r\n    }\r\n\r\n    if (this.config.yAxisLabel) {\r\n      this.chartGroup.append('text')\r\n        .attr('class', 'y-axis-label')\r\n        .attr('transform', 'rotate(-90)')\r\n        .attr('x', -this.innerHeight / 2)\r\n        .attr('y', -45)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', '#1d1d1f')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .text(this.config.yAxisLabel);\r\n    }\r\n\r\n    // Style axes\r\n    this.chartGroup.selectAll('.domain')\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.1)')\r\n      .attr('stroke-width', 2);\r\n\r\n    this.chartGroup.selectAll('.tick line')\r\n      .attr('stroke', 'rgba(0, 0, 0, 0.1)');\r\n  }\r\n\r\n  private addBubbles(\r\n    xScale: d3.ScaleLinear<number, number>,\r\n    yScale: d3.ScaleLinear<number, number>,\r\n    sizeScale: ReturnType<typeof d3.scaleSqrt<number, number>>,\r\n    colorScale: d3.ScaleOrdinal<string, string>\r\n  ): void {\r\n    const bubblesGroup = this.chartGroup.append('g').attr('class', 'bubbles');\r\n\r\n    const bubbles = bubblesGroup.selectAll('.bubble-group')\r\n      .data(this.data)\r\n      .join('g')\r\n      .attr('class', 'bubble-group')\r\n      .attr('transform', d => `translate(${xScale(d.x)},${yScale(d.y)})`);\r\n\r\n    // Shadow circles\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble-shadow')\r\n      .attr('cx', 1)\r\n      .attr('cy', 2)\r\n      .attr('r', 0)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.2)')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Main bubbles with glass effect\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble')\r\n      .attr('r', 0)\r\n      .attr('fill', d => d.color || colorScale(d.category || 'default'))\r\n      .attr('fill-opacity', 0.8)\r\n      .style('filter', 'url(#scatter-3d-shadow)')\r\n      .style('cursor', 'pointer')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .ease(d3.easeElastic)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Glass overlay on bubbles\r\n    bubbles.append('circle')\r\n      .attr('class', 'bubble-glass')\r\n      .attr('r', 0)\r\n      .attr('fill', 'url(#scatter-glass-gradient)')\r\n      .attr('pointer-events', 'none')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 20)\r\n      .attr('r', d => sizeScale(d.size || 1));\r\n\r\n    // Hover effects\r\n    bubbles\r\n      .on('mouseenter', (event, d) => {\r\n        d3.select(event.currentTarget).select('.bubble')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('r', sizeScale(d.size || 1) * 1.2)\r\n          .attr('fill-opacity', 1)\r\n          .style('filter', 'url(#scatter-glow) url(#scatter-3d-shadow)');\r\n\r\n        d3.select(event.currentTarget).select('.bubble-glass')\r\n          .transition()\r\n          .duration(200)\r\n          .attr('r', sizeScale(d.size || 1) * 1.2);\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d, colorScale);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event, d) => {\r\n        d3.select(event.currentTarget).select('.bubble')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('r', sizeScale(d.size || 1))\r\n          .attr('fill-opacity', 0.8)\r\n          .style('filter', 'url(#scatter-3d-shadow)');\r\n\r\n        d3.select(event.currentTarget).select('.bubble-glass')\r\n          .transition()\r\n          .duration(200)\r\n          .attr('r', sizeScale(d.size || 1));\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataPoint: ScatterDataPoint, colorScale: d3.ScaleOrdinal<string, string>): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip(dataPoint);\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataPoint.label || 'Data Point';\r\n      this.tooltipData = [\r\n        { label: 'X', value: dataPoint.x.toFixed(2), color: dataPoint.color || colorScale(dataPoint.category || 'default') },\r\n        { label: 'Y', value: dataPoint.y.toFixed(2) }\r\n      ];\r\n      if (dataPoint.size) {\r\n        this.tooltipData.push({ label: 'Size', value: dataPoint.size.toFixed(2) });\r\n      }\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "styleUrl": "./scatter.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 35,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"scatter-chart-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "Tooltip",
            "id": "component-Tooltip-7ce316766233f9464f58f158c4431400a08e23a21f6b37827cacb81ad2a53aab8b7dc9fe4aa9d739bca2fd8efafe20b7f8177dda5867b615f7f5ea70ac99e300",
            "file": "src/components/base/tooltip/tooltip.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-tooltip",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./tooltip.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 19,
                    "type": "TooltipData[]",
                    "decorators": []
                },
                {
                    "name": "title",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 23,
                    "type": "string",
                    "decorators": []
                },
                {
                    "name": "visible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 22,
                    "type": "boolean",
                    "decorators": []
                },
                {
                    "name": "x",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 20,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "y",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 21,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "offset",
                    "defaultValue": "{ x: 15, y: 15 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 26,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "position",
                    "defaultValue": "{ x: 0, y: 0 }",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "object",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 25
                }
            ],
            "methodsClass": [
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 36,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "onResize",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 84,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "decorators": [
                        {
                            "name": "HostListener",
                            "stringifiedArguments": "'window:resize'"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "updatePosition",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 42,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [
                {
                    "name": "window:resize",
                    "args": [],
                    "argsDecorator": [],
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 84
                }
            ],
            "standalone": true,
            "imports": [
                {
                    "name": "CommonModule",
                    "type": "module"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';\r\nimport { ThemeService } from '../../../services/theme';\r\n\r\nexport interface TooltipData {\r\n    label: string;\r\n    value: string | number;\r\n    color?: string;\r\n}\r\n\r\n@Component({\r\n    selector: 'app-tooltip',\r\n    standalone: true,\r\n    imports: [CommonModule],\r\n    templateUrl: './tooltip.html',\r\n    styleUrl: './tooltip.css',\r\n})\r\nexport class Tooltip implements OnChanges {\r\n    @Input() data: TooltipData[] = [];\r\n    @Input() x: number = 0;\r\n    @Input() y: number = 0;\r\n    @Input() visible: boolean = false;\r\n    @Input() title?: string;\r\n\r\n    position = { x: 0, y: 0 };\r\n    private offset = { x: 15, y: 15 };\r\n\r\n    constructor(\r\n        private elementRef: ElementRef,\r\n        private cdr: ChangeDetectorRef,\r\n        themeService: ThemeService\r\n    ) {\r\n        themeService.loadAndSetTheme('/themes/main.json');\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['x'] || changes['y'] || changes['visible']) {\r\n            setTimeout(() => this.updatePosition(), 0);\r\n        }\r\n    }\r\n\r\n    private updatePosition(): void {\r\n        if (!this.visible) {\r\n            this.position = { x: this.x + this.offset.x, y: this.y + this.offset.y };\r\n            return;\r\n        }\r\n\r\n        const element = this.elementRef.nativeElement.querySelector('.tooltip-container');\r\n\r\n        if (!element) {\r\n            this.position = { x: this.x + this.offset.x, y: this.y + this.offset.y };\r\n            return;\r\n        }\r\n\r\n        const tooltipWidth = element.offsetWidth || 200;\r\n        const tooltipHeight = element.offsetHeight || 100;\r\n        const windowWidth = window.innerWidth;\r\n        const windowHeight = window.innerHeight;\r\n        const margin = 10;\r\n\r\n        let x = this.x + this.offset.x;\r\n        let y = this.y + this.offset.y;\r\n\r\n        if (x + tooltipWidth + margin > windowWidth) {\r\n            x = this.x - tooltipWidth - this.offset.x;\r\n        }\r\n\r\n        if (x < margin) {\r\n            x = margin;\r\n        }\r\n\r\n        if (y + tooltipHeight + margin > windowHeight) {\r\n            y = this.y - tooltipHeight - this.offset.y;\r\n        }\r\n\r\n        if (y < margin) {\r\n            y = margin;\r\n        }\r\n\r\n        this.position = { x, y };\r\n    }\r\n\r\n    @HostListener('window:resize')\r\n    onResize(): void {\r\n        if (this.visible) {\r\n            this.updatePosition();\r\n        }\r\n    }\r\n}\r\n",
            "styleUrl": "./tooltip.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "elementRef",
                        "type": "ElementRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 26,
                "jsdoctags": [
                    {
                        "name": "elementRef",
                        "type": "ElementRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnChanges"
            ],
            "templateData": "<div class=\"tooltip-container\" [class.visible]=\"visible\" [style.left.px]=\"position.x\" [style.top.px]=\"position.y\"\r\n    role=\"tooltip\" aria-live=\"polite\">\r\n\r\n    <div class=\"tooltip-content\">\r\n        <div class=\"tooltip-header\" *ngIf=\"title\">\r\n            <div class=\"tooltip-title\">{{ title }}</div>\r\n        </div>\r\n\r\n        <div class=\"tooltip-items\">\r\n            <div class=\"tooltip-item\" *ngFor=\"let item of data\">\r\n                <span class=\"tooltip-color\" *ngIf=\"item.color\" [style.background-color]=\"item.color\"\r\n                    aria-hidden=\"true\"></span>\r\n                <span class=\"tooltip-label\">{{ item.label }}:</span>\r\n                <span class=\"tooltip-value\">{{ item.value }}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n"
        },
        {
            "name": "Treemap",
            "id": "component-Treemap-d262f43fbddd609dad5bc7a71cb6b0713a0c825ee5aa8323438607e918322887a4b6b626edf5c65870436917abb3e1157a6d2f353fdbe527aa5074f0450c4886",
            "file": "src/components/charts/treemap/treemap.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-treemap",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./treemap.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 40,
                    "type": "TreemapConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 37,
                    "type": "TreemapDataNode",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "500",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 39,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 38,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 31,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 43,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 42,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 45
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 49
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 48
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 46
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 47
                }
            ],
            "methodsClass": [
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 83,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "hideTooltip",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 342,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 63,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 55,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 51,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "showTooltip",
                    "args": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "dataNode",
                            "type": "TreemapDataNode",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 320,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "event",
                            "type": "MouseEvent",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "dataNode",
                            "type": "TreemapDataNode",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 149,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport { ThemeService } from '../../../services/theme';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface TreemapDataNode {\r\n  name: string;\r\n  value?: number;\r\n  children?: TreemapDataNode[];\r\n  color?: string;\r\n}\r\n\r\nexport interface TreemapConfig {\r\n  animated?: boolean;\r\n  colors?: string[];\r\n  paddingInner?: number;\r\n  paddingOuter?: number;\r\n  cornerRadius?: number;\r\n  showLabels?: boolean;\r\n  customTooltip?: (data: TreemapDataNode) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n  selector: 'app-treemap',\r\n  standalone: true,\r\n  imports: [Tooltip],\r\n  templateUrl: './treemap.html',\r\n  styleUrl: './treemap.css',\r\n})\r\nexport class Treemap implements OnInit, OnChanges {\r\n  @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private themeService: ThemeService) {\r\n    themeService.loadAndSetTheme('/themes/main.json');\r\n  }\r\n\r\n  @Input() data!: TreemapDataNode;\r\n  @Input() width: number = 800;\r\n  @Input() height: number = 500;\r\n  @Input() config: TreemapConfig = {};\r\n\r\n  private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n  private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n  tooltipData: TooltipData[] = [];\r\n  tooltipX: number = 0;\r\n  tooltipY: number = 0;\r\n  tooltipVisible: boolean = false;\r\n  tooltipTitle: string = '';\r\n\r\n  ngOnInit(): void {\r\n    this.initializeChart();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n      if (this.svg) {\r\n        this.updateChart();\r\n      }\r\n    }\r\n  }\r\n\r\n  private initializeChart(): void {\r\n    const container = d3.select(this.chartContainer.nativeElement);\r\n    container.selectAll('*').remove();\r\n\r\n    this.svg = container\r\n      .append('svg')\r\n      .attr('width', this.width)\r\n      .attr('height', this.height)\r\n      .attr('class', 'treemap-svg')\r\n      .style('overflow', 'visible');\r\n\r\n    this.addDefs();\r\n\r\n    this.chartGroup = this.svg\r\n      .append('g')\r\n      .attr('class', 'chart-group');\r\n\r\n    this.updateChart();\r\n  }\r\n\r\n  private addDefs(): void {\r\n    const defs = this.svg.append('defs');\r\n\r\n    const glassGradient = defs.append('linearGradient')\r\n      .attr('id', 'treemap-glass-gradient')\r\n      .attr('x1', '0%')\r\n      .attr('y1', '0%')\r\n      .attr('x2', '100%')\r\n      .attr('y2', '100%');\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '0%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.7)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '50%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.3)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    glassGradient.append('stop')\r\n      .attr('offset', '100%')\r\n      .attr('stop-color', 'rgba(255, 255, 255, 0.05)')\r\n      .attr('stop-opacity', 1);\r\n\r\n    const shadow = defs.append('filter')\r\n      .attr('id', 'treemap-shadow')\r\n      .attr('x', '-50%')\r\n      .attr('y', '-50%')\r\n      .attr('width', '200%')\r\n      .attr('height', '200%');\r\n\r\n    shadow.append('feGaussianBlur')\r\n      .attr('in', 'SourceAlpha')\r\n      .attr('stdDeviation', 4);\r\n\r\n    shadow.append('feOffset')\r\n      .attr('dx', 0)\r\n      .attr('dy', 3)\r\n      .attr('result', 'offsetblur');\r\n\r\n    shadow.append('feComponentTransfer')\r\n      .append('feFuncA')\r\n      .attr('type', 'linear')\r\n      .attr('slope', 0.25);\r\n\r\n    const feMerge = shadow.append('feMerge');\r\n    feMerge.append('feMergeNode');\r\n    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n    const glow = defs.append('filter')\r\n      .attr('id', 'treemap-glow')\r\n      .attr('x', '-100%')\r\n      .attr('y', '-100%')\r\n      .attr('width', '300%')\r\n      .attr('height', '300%');\r\n\r\n    glow.append('feGaussianBlur')\r\n      .attr('stdDeviation', 8)\r\n      .attr('result', 'coloredBlur');\r\n\r\n    const glowMerge = glow.append('feMerge');\r\n    glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n    glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n  }\r\n\r\n  private updateChart(): void {\r\n    if (!this.data) return;\r\n\r\n    this.chartGroup.selectAll('*').remove();\r\n\r\n    const cornerRadius = this.config.cornerRadius ?? 8;\r\n    const paddingInner = this.config.paddingInner ?? 2;\r\n    const paddingOuter = this.config.paddingOuter ?? 4;\r\n\r\n    const root = d3.hierarchy(this.data)\r\n      .sum(d => d.value || 0)\r\n      .sort((a, b) => (b.value || 0) - (a.value || 0));\r\n\r\n    const treemapLayout = d3.treemap<TreemapDataNode>()\r\n      .size([this.width, this.height])\r\n      .paddingInner(paddingInner)\r\n      .paddingOuter(paddingOuter)\r\n      .round(true);\r\n\r\n    treemapLayout(root as any);\r\n\r\n    const leaves = root.leaves() as d3.HierarchyRectangularNode<TreemapDataNode>[];\r\n    const colorScale = d3.scaleOrdinal<string>()\r\n      .domain(leaves.map((_, i) => i.toString()))\r\n      .range(this.config.colors || [\r\n        '#0071e3', '#8e44ff', '#ff2d55', '#34c759',\r\n        '#ff9f0a', '#5ac8fa', '#af52de', '#ff3b30'\r\n      ]);\r\n\r\n    const cells = this.chartGroup\r\n      .selectAll('.cell')\r\n      .data(leaves)\r\n      .join('g')\r\n      .attr('class', 'cell')\r\n      .attr('transform', d => `translate(${d.x0},${d.y0})`);\r\n\r\n    // Shadow rectangles\r\n    cells.append('rect')\r\n      .attr('class', 'cell-shadow')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('x', 2)\r\n      .attr('y', 2)\r\n      .attr('fill', 'rgba(0, 0, 0, 0.15)')\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Main rectangles\r\n    cells.append('rect')\r\n      .attr('class', 'cell-rect')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('fill', (d, i) => d.data.color || colorScale(i.toString()))\r\n      .attr('fill-opacity', 0.85)\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .style('filter', 'url(#treemap-shadow)')\r\n      .style('cursor', 'pointer')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .ease(d3.easeCubicOut)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Glass overlay\r\n    cells.append('rect')\r\n      .attr('class', 'cell-glass')\r\n      .attr('width', 0)\r\n      .attr('height', 0)\r\n      .attr('fill', 'url(#treemap-glass-gradient)')\r\n      .attr('rx', cornerRadius)\r\n      .attr('ry', cornerRadius)\r\n      .attr('pointer-events', 'none')\r\n      .transition()\r\n      .duration(this.config.animated !== false ? 600 : 0)\r\n      .delay((_, i) => i * 15)\r\n      .attr('width', d => Math.max(0, d.x1 - d.x0))\r\n      .attr('height', d => Math.max(0, d.y1 - d.y0));\r\n\r\n    // Labels\r\n    if (this.config.showLabels !== false) {\r\n      cells.append('text')\r\n        .attr('class', 'cell-label')\r\n        .attr('x', d => (d.x1 - d.x0) / 2)\r\n        .attr('y', d => (d.y1 - d.y0) / 2)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('dominant-baseline', 'middle')\r\n        .attr('fill', 'white')\r\n        .attr('font-size', '14px')\r\n        .attr('font-weight', '600')\r\n        .attr('pointer-events', 'none')\r\n        .style('text-shadow', '0 2px 4px rgba(0, 0, 0, 0.4)')\r\n        .attr('opacity', 0)\r\n        .text(d => {\r\n          const width = d.x1 - d.x0;\r\n          const height = d.y1 - d.y0;\r\n          if (width > 60 && height > 30) {\r\n            return d.data.name;\r\n          }\r\n          return '';\r\n        })\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 300)\r\n        .attr('opacity', 1);\r\n\r\n      // Value labels\r\n      cells.append('text')\r\n        .attr('class', 'cell-value')\r\n        .attr('x', d => (d.x1 - d.x0) / 2)\r\n        .attr('y', d => (d.y1 - d.y0) / 2 + 18)\r\n        .attr('text-anchor', 'middle')\r\n        .attr('fill', 'rgba(255, 255, 255, 0.9)')\r\n        .attr('font-size', '12px')\r\n        .attr('pointer-events', 'none')\r\n        .style('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.3)')\r\n        .attr('opacity', 0)\r\n        .text(d => {\r\n          const width = d.x1 - d.x0;\r\n          const height = d.y1 - d.y0;\r\n          if (width > 80 && height > 50 && d.data.value) {\r\n            return d.data.value.toLocaleString();\r\n          }\r\n          return '';\r\n        })\r\n        .transition()\r\n        .duration(this.config.animated !== false ? 600 : 0)\r\n        .delay((_, i) => i * 15 + 400)\r\n        .attr('opacity', 1);\r\n    }\r\n\r\n    // Hover effects\r\n    cells\r\n      .on('mouseenter', (event, d: any) => {\r\n        d3.select(event.currentTarget).select('.cell-rect')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('fill-opacity', 1)\r\n          .style('filter', 'url(#treemap-glow) url(#treemap-shadow)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.showTooltip(event, d.data);\r\n        });\r\n      })\r\n      .on('mousemove', (event) => {\r\n        this.ngZone.run(() => {\r\n          this.tooltipX = event.clientX;\r\n          this.tooltipY = event.clientY;\r\n        });\r\n      })\r\n      .on('mouseleave', (event) => {\r\n        d3.select(event.currentTarget).select('.cell-rect')\r\n          .transition()\r\n          .duration(200)\r\n          .ease(d3.easeCubicOut)\r\n          .attr('fill-opacity', 0.85)\r\n          .style('filter', 'url(#treemap-shadow)');\r\n\r\n        this.ngZone.run(() => {\r\n          this.hideTooltip();\r\n        });\r\n      });\r\n  }\r\n\r\n  private showTooltip(event: MouseEvent, dataNode: TreemapDataNode): void {\r\n    if (this.config.customTooltip) {\r\n      const customData = this.config.customTooltip(dataNode);\r\n      this.tooltipTitle = customData.title || '';\r\n      this.tooltipData = customData.items.map(item => ({\r\n        label: item.label,\r\n        value: item.value,\r\n        color: item.color\r\n      }));\r\n    } else {\r\n      this.tooltipTitle = dataNode.name;\r\n      this.tooltipData = [\r\n        { label: 'Value', value: (dataNode.value || 0).toLocaleString() }\r\n      ];\r\n    }\r\n\r\n    this.tooltipX = event.clientX;\r\n    this.tooltipY = event.clientY;\r\n    this.tooltipVisible = true;\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  private hideTooltip(): void {\r\n    this.tooltipVisible = false;\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n",
            "styleUrl": "./treemap.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 31,
                "jsdoctags": [
                    {
                        "name": "ngZone",
                        "type": "NgZone",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "cdr",
                        "type": "ChangeDetectorRef",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "themeService",
                        "type": "ThemeService",
                        "optional": false,
                        "dotDotDotToken": false,
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"treemap-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        },
        {
            "name": "WordCloud",
            "id": "component-WordCloud-573f7d1c185735e01e6ba12fe9de0161ce2fe7b85633ef143a864721d791c34f66e9e6ca6e681892009c3cf7a54d85af45c9dd19a40bfd7e14e784146dfa9808",
            "file": "src/components/charts/wordcloud/wordcloud.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "app-wordcloud",
            "styleUrls": [],
            "styles": [],
            "templateUrl": [
                "./wordcloud.html"
            ],
            "viewProviders": [],
            "hostDirectives": [],
            "inputsClass": [
                {
                    "name": "config",
                    "defaultValue": "{}",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 32,
                    "type": "WordCloudConfig",
                    "decorators": []
                },
                {
                    "name": "data",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 29,
                    "type": "WordCloudDataPoint[]",
                    "decorators": []
                },
                {
                    "name": "height",
                    "defaultValue": "600",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 31,
                    "type": "number",
                    "decorators": []
                },
                {
                    "name": "width",
                    "defaultValue": "800",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 30,
                    "type": "number",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [
                {
                    "name": "chartContainer",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "ElementRef",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 27,
                    "decorators": [
                        {
                            "name": "ViewChild",
                            "stringifiedArguments": "'chartContainer', {static: true}"
                        }
                    ],
                    "modifierKind": [
                        171
                    ]
                },
                {
                    "name": "chartGroup",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 35,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "svg",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "d3.Selection<SVGSVGElement | unknown |  | undefined>",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 34,
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "tooltipData",
                    "defaultValue": "[]",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "TooltipData[]",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 37
                },
                {
                    "name": "tooltipTitle",
                    "defaultValue": "''",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "string",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 41
                },
                {
                    "name": "tooltipVisible",
                    "defaultValue": "false",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "boolean",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 40
                },
                {
                    "name": "tooltipX",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 38
                },
                {
                    "name": "tooltipY",
                    "defaultValue": "0",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "number",
                    "indexKey": "",
                    "optional": false,
                    "description": "",
                    "line": 39
                }
            ],
            "methodsClass": [
                {
                    "name": "addDefs",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 76,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "initializeChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 55,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                },
                {
                    "name": "ngOnChanges",
                    "args": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 47,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "jsdoctags": [
                        {
                            "name": "changes",
                            "type": "SimpleChanges",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "ngOnInit",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 43,
                    "deprecated": false,
                    "deprecationMessage": ""
                },
                {
                    "name": "renderWords",
                    "args": [
                        {
                            "name": "words",
                            "type": "any[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 158,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ],
                    "jsdoctags": [
                        {
                            "name": "words",
                            "type": "any[]",
                            "optional": false,
                            "dotDotDotToken": false,
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "updateChart",
                    "args": [],
                    "optional": false,
                    "returnType": "void",
                    "typeParameters": [],
                    "line": 121,
                    "deprecated": false,
                    "deprecationMessage": "",
                    "modifierKind": [
                        123
                    ]
                }
            ],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [],
            "hostListeners": [],
            "standalone": true,
            "imports": [
                {
                    "name": "Tooltip"
                }
            ],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "sourceCode": "import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport * as d3 from 'd3';\r\nimport cloud from 'd3-cloud';\r\nimport { WordCloudDataPoint } from '../../../types/chart';\r\nimport { Tooltip, TooltipData } from '../../base/tooltip/tooltip';\r\n\r\nexport interface WordCloudConfig {\r\n    animated?: boolean;\r\n    fontFamily?: string;\r\n    minFontSize?: number;\r\n    maxFontSize?: number;\r\n    rotation?: number | (() => number);\r\n    padding?: number;\r\n    colors?: string[];\r\n    spiral?: 'archimedean' | 'rectangular';\r\n    customTooltip?: (data: { text: string; value: number; color?: string; }) => { title?: string; items: Array<{ label: string; value: string | number; color?: string; }>; };\r\n}\r\n\r\n@Component({\r\n    selector: 'app-wordcloud',\r\n    standalone: true,\r\n    imports: [Tooltip],\r\n    templateUrl: './wordcloud.html',\r\n    styleUrl: './wordcloud.css',\r\n})\r\nexport class WordCloud implements OnInit, OnChanges {\r\n    @ViewChild('chartContainer', { static: true }) chartContainer!: ElementRef;\r\n\r\n    @Input() data: WordCloudDataPoint[] = [];\r\n    @Input() width: number = 800;\r\n    @Input() height: number = 600;\r\n    @Input() config: WordCloudConfig = {};\r\n\r\n    private svg!: d3.Selection<SVGSVGElement, unknown, null, undefined>;\r\n    private chartGroup!: d3.Selection<SVGGElement, unknown, null, undefined>;\r\n\r\n    tooltipData: TooltipData[] = [];\r\n    tooltipX: number = 0;\r\n    tooltipY: number = 0;\r\n    tooltipVisible: boolean = false;\r\n    tooltipTitle: string = '';\r\n\r\n    ngOnInit(): void {\r\n        this.initializeChart();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['data'] || changes['width'] || changes['height'] || changes['config']) {\r\n            if (this.svg) {\r\n                this.updateChart();\r\n            }\r\n        }\r\n    }\r\n\r\n    private initializeChart(): void {\r\n        const container = d3.select(this.chartContainer.nativeElement);\r\n        container.selectAll('*').remove();\r\n\r\n        this.svg = container\r\n            .append('svg')\r\n            .attr('width', this.width)\r\n            .attr('height', this.height)\r\n            .attr('class', 'wordcloud-svg')\r\n            .style('overflow', 'visible');\r\n\r\n        this.addDefs();\r\n\r\n        this.chartGroup = this.svg\r\n            .append('g')\r\n            .attr('class', 'chart-group')\r\n            .attr('transform', `translate(${this.width / 2},${this.height / 2})`);\r\n\r\n        this.updateChart();\r\n    }\r\n\r\n    private addDefs(): void {\r\n        const defs = this.svg.append('defs');\r\n\r\n        // Text shadow filter\r\n        const shadow = defs.append('filter')\r\n            .attr('id', 'word-shadow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        shadow.append('feGaussianBlur')\r\n            .attr('in', 'SourceAlpha')\r\n            .attr('stdDeviation', 2);\r\n\r\n        shadow.append('feOffset')\r\n            .attr('dx', 0)\r\n            .attr('dy', 2);\r\n\r\n        shadow.append('feComponentTransfer')\r\n            .append('feFuncA')\r\n            .attr('type', 'linear')\r\n            .attr('slope', 0.3);\r\n\r\n        const feMerge = shadow.append('feMerge');\r\n        feMerge.append('feMergeNode');\r\n        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n\r\n        // Glow filter\r\n        const glow = defs.append('filter')\r\n            .attr('id', 'word-glow')\r\n            .attr('x', '-50%')\r\n            .attr('y', '-50%')\r\n            .attr('width', '200%')\r\n            .attr('height', '200%');\r\n\r\n        glow.append('feGaussianBlur')\r\n            .attr('stdDeviation', 3)\r\n            .attr('result', 'coloredBlur');\r\n\r\n        const glowMerge = glow.append('feMerge');\r\n        glowMerge.append('feMergeNode').attr('in', 'coloredBlur');\r\n        glowMerge.append('feMergeNode').attr('in', 'SourceGraphic');\r\n    }\r\n\r\n    private updateChart(): void {\r\n        if (!this.data || this.data.length === 0) return;\r\n\r\n        this.chartGroup.selectAll('*').remove();\r\n\r\n        // Create font size scale\r\n        const values = this.data.map(d => d.value);\r\n        const fontScale = d3.scaleLinear()\r\n            .domain([Math.min(...values), Math.max(...values)])\r\n            .range([this.config.minFontSize || 16, this.config.maxFontSize || 80]);\r\n\r\n        // Color scale\r\n        const colorScale = d3.scaleOrdinal<string>()\r\n            .domain(this.data.map(d => d.text))\r\n            .range(this.config.colors || ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4', '#f97316']);\r\n\r\n        // Create layout\r\n        const layout = cloud()\r\n            .size([this.width, this.height])\r\n            .words(this.data.map(d => ({\r\n                text: d.text,\r\n                size: fontScale(d.value),\r\n                color: d.color || colorScale(d.text),\r\n                value: d.value\r\n            })))\r\n            .padding(this.config.padding ?? 5)\r\n            .rotate(this.config.rotation ?? (() => (Math.random() > 0.5 ? 0 : 90)))\r\n            .font(this.config.fontFamily || 'var(--font-family)')\r\n            .fontSize((d: any) => d.size)\r\n            .spiral(this.config.spiral || 'archimedean')\r\n            .on('end', (words: any[]) => {\r\n                this.renderWords(words);\r\n            });\r\n\r\n        layout.start();\r\n    }\r\n\r\n    private renderWords(words: any[]): void {\r\n        const wordGroups = this.chartGroup.selectAll('.word-group')\r\n            .data(words)\r\n            .join('g')\r\n            .attr('class', 'word-group')\r\n            .attr('transform', d => `translate(${d.x},${d.y})`);\r\n\r\n        // Add text shadow\r\n        wordGroups.append('text')\r\n            .attr('class', 'word-shadow')\r\n            .attr('text-anchor', 'middle')\r\n            .attr('transform', d => `rotate(${d.rotate}) translate(1, 1)`)\r\n            .attr('font-size', d => `${d.size}px`)\r\n            .attr('font-family', this.config.fontFamily || 'var(--font-family)')\r\n            .attr('font-weight', '700')\r\n            .attr('fill', 'rgba(0, 0, 0, 0.2)')\r\n            .text(d => d.text);\r\n\r\n        // Add main text\r\n        const wordElements = wordGroups.append('text')\r\n            .attr('class', 'word')\r\n            .attr('text-anchor', 'middle')\r\n            .attr('transform', (d: any) => `rotate(${d.rotate})`)\r\n            .attr('font-size', (d: any) => `${d.size}px`)\r\n            .attr('font-family', this.config.fontFamily || 'var(--font-family)')\r\n            .attr('font-weight', '700')\r\n            .attr('fill', (d: any) => d.color)\r\n            .style('filter', 'url(#word-shadow)')\r\n            .text((d: any) => d.text);\r\n\r\n        // Animate words\r\n        if (this.config.animated !== false) {\r\n            wordElements\r\n                .attr('opacity', 0)\r\n                .attr('transform', (d: any) => `rotate(${d.rotate}) scale(0)`)\r\n                .transition()\r\n                .duration(800)\r\n                .delay((_: any, i: number) => i * 50)\r\n                .ease(d3.easeBackOut)\r\n                .attr('opacity', 1)\r\n                .attr('transform', (d: any) => `rotate(${d.rotate}) scale(1)`);\r\n        }\r\n\r\n        // Add hover effects\r\n        wordElements\r\n            .on('mouseenter', function (_event: any, d: any) {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('transform', `rotate(${d.rotate}) scale(1.2)`)\r\n                    .style('filter', 'url(#word-glow) url(#word-shadow)')\r\n                    .attr('cursor', 'pointer');\r\n            })\r\n            .on('mouseleave', function (_event: any, d: any) {\r\n                d3.select(this)\r\n                    .transition()\r\n                    .duration(200)\r\n                    .attr('transform', `rotate(${d.rotate}) scale(1)`)\r\n                    .style('filter', 'url(#word-shadow)');\r\n            });\r\n\r\n        // Add tooltips on hover\r\n        wordElements\r\n            .append('title')\r\n            .text((d: any) => `${d.text}: ${d.value}`);\r\n    }\r\n}\r\n",
            "styleUrl": "./wordcloud.css",
            "assetsDirs": [],
            "styleUrlsData": "",
            "stylesData": "",
            "extends": [],
            "implements": [
                "OnInit",
                "OnChanges"
            ],
            "templateData": "<div #chartContainer class=\"wordcloud-container\"></div>\r\n<app-tooltip [data]=\"tooltipData\" [x]=\"tooltipX\" [y]=\"tooltipY\" [visible]=\"tooltipVisible\" [title]=\"tooltipTitle\">\r\n</app-tooltip>\r\n"
        }
    ],
    "modules": [],
    "miscellaneous": {
        "variables": [
            {
                "name": "calculateLabelRotation",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "src/utils/chart-helpers.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "unknown",
                "defaultValue": "(\r\n    width: number,\r\n    labels: string[],\r\n    maxLabelWidth: number = 100\r\n): number => {\r\n    if (labels.length === 0) return 0;\r\n\r\n    const availableWidthPerLabel = width / labels.length;\r\n\r\n    if (availableWidthPerLabel >= maxLabelWidth) {\r\n        return 0;\r\n    }\r\n\r\n    const rotatedWidth45 = maxLabelWidth * 0.707;\r\n    if (availableWidthPerLabel >= rotatedWidth45) {\r\n        return -45;\r\n    }\r\n\r\n    return -90;\r\n}"
            },
            {
                "name": "estimateTextWidth",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "src/utils/chart-helpers.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "unknown",
                "defaultValue": "(\r\n    text: string,\r\n    fontSize: number = 12,\r\n    fontFamily: string = 'system-ui, -apple-system, sans-serif'\r\n): number => {\r\n\r\n    const canvas = document.createElement('canvas');\r\n    const context = canvas.getContext('2d');\r\n\r\n    if (!context) {\r\n\r\n        return text.length * (fontSize * 0.6);\r\n    }\r\n\r\n    context.font = `${fontSize}px ${fontFamily}`;\r\n    const metrics = context.measureText(text);\r\n\r\n    return metrics.width;\r\n}"
            },
            {
                "name": "formatNumber",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "src/utils/chart-helpers.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "unknown",
                "defaultValue": "(value: number, locale: string = 'en-US', options: Intl.NumberFormatOptions = {}): string => {\r\n    return new Intl.NumberFormat(locale, options).format(value);\r\n}"
            },
            {
                "name": "getMaxLabelWidth",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "src/utils/chart-helpers.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "unknown",
                "defaultValue": "(\r\n    labels: string[],\r\n    fontSize: number = 12,\r\n    fontFamily: string = 'system-ui, -apple-system, sans-serif'\r\n): number => {\r\n    if (labels.length === 0) return 0;\r\n\r\n    return Math.max(...labels.map(label =>\r\n        estimateTextWidth(String(label), fontSize, fontFamily)\r\n    ));\r\n}"
            },
            {
                "name": "shouldRotateLabels",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "src/utils/chart-helpers.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "unknown",
                "defaultValue": "(\r\n    width: number,\r\n    labels: string[],\r\n    maxLabelWidth: number = 100,\r\n    padding: number = 10\r\n): boolean => {\r\n    if (labels.length === 0) return false;\r\n\r\n    const availableWidthPerLabel = width / labels.length;\r\n    const requiredWidthPerLabel = maxLabelWidth + padding;\r\n\r\n    return requiredWidthPerLabel > availableWidthPerLabel;\r\n}"
            },
            {
                "name": "truncateText",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "src/utils/chart-helpers.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "unknown",
                "defaultValue": "(\r\n    text: string,\r\n    maxWidth: number,\r\n    fontSize: number = 12,\r\n    fontFamily: string = 'system-ui, -apple-system, sans-serif'\r\n): string => {\r\n    const fullWidth = estimateTextWidth(text, fontSize, fontFamily);\r\n\r\n    if (fullWidth <= maxWidth) {\r\n        return text;\r\n    }\r\n\r\n    let low = 0;\r\n    let high = text.length;\r\n    let result = text;\r\n\r\n    while (low <= high) {\r\n        const mid = Math.floor((low + high) / 2);\r\n        const truncated = text.slice(0, mid) + '...';\r\n        const width = estimateTextWidth(truncated, fontSize, fontFamily);\r\n\r\n        if (width <= maxWidth) {\r\n            result = truncated;\r\n            low = mid + 1;\r\n        } else {\r\n            high = mid - 1;\r\n        }\r\n    }\r\n\r\n    return result;\r\n}"
            }
        ],
        "functions": [
            {
                "name": "addHoverEffect",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "selection",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "onHover",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "onLeave",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "void",
                "jsdoctags": [
                    {
                        "name": "selection",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "onHover",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "onLeave",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "aggregateData",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "data",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "groupBy",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "aggregate",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "literal type[]",
                "jsdoctags": [
                    {
                        "name": "data",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "groupBy",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "aggregate",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "createRoundedRect",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "x",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "y",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "width",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "height",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "radius",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "string",
                "jsdoctags": [
                    {
                        "name": "x",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "y",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "width",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "height",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "radius",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "darkenColor",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "color",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "amount",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "0.2"
                    }
                ],
                "returnType": "string",
                "jsdoctags": [
                    {
                        "name": "color",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "amount",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "0.2",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "debounce",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "func",
                        "type": "T",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "wait",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "void",
                "jsdoctags": [
                    {
                        "name": "func",
                        "type": "T",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "wait",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "formatDate",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "date",
                        "type": "Date",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "format",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "'short'"
                    }
                ],
                "returnType": "string",
                "jsdoctags": [
                    {
                        "name": "date",
                        "type": "Date",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "format",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "'short'",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "formatValue",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "value",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "type",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "'number'"
                    }
                ],
                "returnType": "string",
                "jsdoctags": [
                    {
                        "name": "value",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "type",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "'number'",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "generateColorPalette",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "baseColor",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "count",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "string[]",
                "jsdoctags": [
                    {
                        "name": "baseColor",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "count",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "getResponsiveDimensions",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "container",
                        "type": "HTMLElement",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "aspectRatio",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "16 / 9"
                    }
                ],
                "returnType": "literal type",
                "jsdoctags": [
                    {
                        "name": "container",
                        "type": "HTMLElement",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "aspectRatio",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "16 / 9",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "getScale",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "type",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "domain",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "range",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "any",
                "jsdoctags": [
                    {
                        "name": "type",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "domain",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "range",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "hexToRgba",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "<p>D3 utility functions for charts</p>\n",
                "args": [
                    {
                        "name": "hex",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "alpha",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "1"
                    }
                ],
                "returnType": "string",
                "jsdoctags": [
                    {
                        "name": "hex",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "alpha",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "1",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "lightenColor",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "color",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "amount",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "0.2"
                    }
                ],
                "returnType": "string",
                "jsdoctags": [
                    {
                        "name": "color",
                        "type": "string",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "amount",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "0.2",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "normalizeData",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "data",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "returnType": "number[]",
                "jsdoctags": [
                    {
                        "name": "data",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "staggeredTransition",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "selection",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "duration",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "300"
                    },
                    {
                        "name": "staggerDelay",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "50"
                    }
                ],
                "returnType": "d3.Transition<T, any, any, any>",
                "jsdoctags": [
                    {
                        "name": "selection",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "duration",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "300",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "staggerDelay",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "50",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            {
                "name": "transitionElement",
                "file": "src/utils/d3-helpers.ts",
                "ctype": "miscellaneous",
                "subtype": "function",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "args": [
                    {
                        "name": "selection",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "duration",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "300"
                    },
                    {
                        "name": "delay",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "0"
                    }
                ],
                "returnType": "d3.Transition<T, any, any, any>",
                "jsdoctags": [
                    {
                        "name": "selection",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "duration",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "300",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "delay",
                        "type": "number",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "defaultValue": "0",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            }
        ],
        "typealiases": [
            {
                "name": "Animations",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            },
            {
                "name": "AxisOrientation",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "\"top\" | \"bottom\" | \"left\" | \"right\"",
                "file": "src/components/base/axis/axis.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 193
            },
            {
                "name": "AxisScale",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "d3.AxisScale<any>",
                "file": "src/components/base/axis/axis.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 184
            },
            {
                "name": "Borders",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            },
            {
                "name": "ChartTheme",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "\"glass\" | \"solid\" | \"gradient\"",
                "file": "src/components/base/chart-container/chart-container.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 193
            },
            {
                "name": "Colors",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            },
            {
                "name": "Effects",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            },
            {
                "name": "Fonts",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            },
            {
                "name": "GridOrientation",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "\"horizontal\" | \"vertical\" | \"both\"",
                "file": "src/components/base/grid/grid.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 193
            },
            {
                "name": "LegendOrientation",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "\"horizontal\" | \"vertical\"",
                "file": "src/components/base/legend/legend.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 193
            },
            {
                "name": "LegendPosition",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "\"top\" | \"bottom\" | \"left\" | \"right\"",
                "file": "src/components/base/legend/legend.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 193
            },
            {
                "name": "Spacing",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            },
            {
                "name": "Theme",
                "ctype": "miscellaneous",
                "subtype": "typealias",
                "rawtype": "literal type",
                "file": "src/types/theme.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "description": "",
                "kind": 188
            }
        ],
        "enumerations": [],
        "groupedVariables": {
            "src/utils/chart-helpers.ts": [
                {
                    "name": "calculateLabelRotation",
                    "ctype": "miscellaneous",
                    "subtype": "variable",
                    "file": "src/utils/chart-helpers.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "defaultValue": "(\r\n    width: number,\r\n    labels: string[],\r\n    maxLabelWidth: number = 100\r\n): number => {\r\n    if (labels.length === 0) return 0;\r\n\r\n    const availableWidthPerLabel = width / labels.length;\r\n\r\n    if (availableWidthPerLabel >= maxLabelWidth) {\r\n        return 0;\r\n    }\r\n\r\n    const rotatedWidth45 = maxLabelWidth * 0.707;\r\n    if (availableWidthPerLabel >= rotatedWidth45) {\r\n        return -45;\r\n    }\r\n\r\n    return -90;\r\n}"
                },
                {
                    "name": "estimateTextWidth",
                    "ctype": "miscellaneous",
                    "subtype": "variable",
                    "file": "src/utils/chart-helpers.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "defaultValue": "(\r\n    text: string,\r\n    fontSize: number = 12,\r\n    fontFamily: string = 'system-ui, -apple-system, sans-serif'\r\n): number => {\r\n\r\n    const canvas = document.createElement('canvas');\r\n    const context = canvas.getContext('2d');\r\n\r\n    if (!context) {\r\n\r\n        return text.length * (fontSize * 0.6);\r\n    }\r\n\r\n    context.font = `${fontSize}px ${fontFamily}`;\r\n    const metrics = context.measureText(text);\r\n\r\n    return metrics.width;\r\n}"
                },
                {
                    "name": "formatNumber",
                    "ctype": "miscellaneous",
                    "subtype": "variable",
                    "file": "src/utils/chart-helpers.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "defaultValue": "(value: number, locale: string = 'en-US', options: Intl.NumberFormatOptions = {}): string => {\r\n    return new Intl.NumberFormat(locale, options).format(value);\r\n}"
                },
                {
                    "name": "getMaxLabelWidth",
                    "ctype": "miscellaneous",
                    "subtype": "variable",
                    "file": "src/utils/chart-helpers.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "defaultValue": "(\r\n    labels: string[],\r\n    fontSize: number = 12,\r\n    fontFamily: string = 'system-ui, -apple-system, sans-serif'\r\n): number => {\r\n    if (labels.length === 0) return 0;\r\n\r\n    return Math.max(...labels.map(label =>\r\n        estimateTextWidth(String(label), fontSize, fontFamily)\r\n    ));\r\n}"
                },
                {
                    "name": "shouldRotateLabels",
                    "ctype": "miscellaneous",
                    "subtype": "variable",
                    "file": "src/utils/chart-helpers.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "defaultValue": "(\r\n    width: number,\r\n    labels: string[],\r\n    maxLabelWidth: number = 100,\r\n    padding: number = 10\r\n): boolean => {\r\n    if (labels.length === 0) return false;\r\n\r\n    const availableWidthPerLabel = width / labels.length;\r\n    const requiredWidthPerLabel = maxLabelWidth + padding;\r\n\r\n    return requiredWidthPerLabel > availableWidthPerLabel;\r\n}"
                },
                {
                    "name": "truncateText",
                    "ctype": "miscellaneous",
                    "subtype": "variable",
                    "file": "src/utils/chart-helpers.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "type": "unknown",
                    "defaultValue": "(\r\n    text: string,\r\n    maxWidth: number,\r\n    fontSize: number = 12,\r\n    fontFamily: string = 'system-ui, -apple-system, sans-serif'\r\n): string => {\r\n    const fullWidth = estimateTextWidth(text, fontSize, fontFamily);\r\n\r\n    if (fullWidth <= maxWidth) {\r\n        return text;\r\n    }\r\n\r\n    let low = 0;\r\n    let high = text.length;\r\n    let result = text;\r\n\r\n    while (low <= high) {\r\n        const mid = Math.floor((low + high) / 2);\r\n        const truncated = text.slice(0, mid) + '...';\r\n        const width = estimateTextWidth(truncated, fontSize, fontFamily);\r\n\r\n        if (width <= maxWidth) {\r\n            result = truncated;\r\n            low = mid + 1;\r\n        } else {\r\n            high = mid - 1;\r\n        }\r\n    }\r\n\r\n    return result;\r\n}"
                }
            ]
        },
        "groupedFunctions": {
            "src/utils/d3-helpers.ts": [
                {
                    "name": "addHoverEffect",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "selection",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "onHover",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "onLeave",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "void",
                    "jsdoctags": [
                        {
                            "name": "selection",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "onHover",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "onLeave",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "aggregateData",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "data",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "groupBy",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "aggregate",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "literal type[]",
                    "jsdoctags": [
                        {
                            "name": "data",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "groupBy",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "aggregate",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "createRoundedRect",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "x",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "y",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "width",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "height",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "radius",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "string",
                    "jsdoctags": [
                        {
                            "name": "x",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "y",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "width",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "height",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "radius",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "darkenColor",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "color",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "amount",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "0.2"
                        }
                    ],
                    "returnType": "string",
                    "jsdoctags": [
                        {
                            "name": "color",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "amount",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "0.2",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "debounce",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "func",
                            "type": "T",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "wait",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "void",
                    "jsdoctags": [
                        {
                            "name": "func",
                            "type": "T",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "wait",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "formatDate",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "date",
                            "type": "Date",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "format",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'short'"
                        }
                    ],
                    "returnType": "string",
                    "jsdoctags": [
                        {
                            "name": "date",
                            "type": "Date",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "format",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'short'",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "formatValue",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "value",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "type",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'number'"
                        }
                    ],
                    "returnType": "string",
                    "jsdoctags": [
                        {
                            "name": "value",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "type",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "'number'",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "generateColorPalette",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "baseColor",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "count",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "string[]",
                    "jsdoctags": [
                        {
                            "name": "baseColor",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "count",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "getResponsiveDimensions",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "container",
                            "type": "HTMLElement",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "aspectRatio",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "16 / 9"
                        }
                    ],
                    "returnType": "literal type",
                    "jsdoctags": [
                        {
                            "name": "container",
                            "type": "HTMLElement",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "aspectRatio",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "16 / 9",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "getScale",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "type",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "domain",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "range",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "any",
                    "jsdoctags": [
                        {
                            "name": "type",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "domain",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "range",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "hexToRgba",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "<p>D3 utility functions for charts</p>\n",
                    "args": [
                        {
                            "name": "hex",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "alpha",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "1"
                        }
                    ],
                    "returnType": "string",
                    "jsdoctags": [
                        {
                            "name": "hex",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "alpha",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "1",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "lightenColor",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "color",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "amount",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "0.2"
                        }
                    ],
                    "returnType": "string",
                    "jsdoctags": [
                        {
                            "name": "color",
                            "type": "string",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "amount",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "0.2",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "normalizeData",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "data",
                            "deprecated": false,
                            "deprecationMessage": ""
                        }
                    ],
                    "returnType": "number[]",
                    "jsdoctags": [
                        {
                            "name": "data",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "staggeredTransition",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "selection",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "duration",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "300"
                        },
                        {
                            "name": "staggerDelay",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "50"
                        }
                    ],
                    "returnType": "d3.Transition<T, any, any, any>",
                    "jsdoctags": [
                        {
                            "name": "selection",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "duration",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "300",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "staggerDelay",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "50",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                },
                {
                    "name": "transitionElement",
                    "file": "src/utils/d3-helpers.ts",
                    "ctype": "miscellaneous",
                    "subtype": "function",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "args": [
                        {
                            "name": "selection",
                            "deprecated": false,
                            "deprecationMessage": ""
                        },
                        {
                            "name": "duration",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "300"
                        },
                        {
                            "name": "delay",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "0"
                        }
                    ],
                    "returnType": "d3.Transition<T, any, any, any>",
                    "jsdoctags": [
                        {
                            "name": "selection",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "duration",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "300",
                            "tagName": {
                                "text": "param"
                            }
                        },
                        {
                            "name": "delay",
                            "type": "number",
                            "deprecated": false,
                            "deprecationMessage": "",
                            "defaultValue": "0",
                            "tagName": {
                                "text": "param"
                            }
                        }
                    ]
                }
            ]
        },
        "groupedEnumerations": {},
        "groupedTypeAliases": {
            "src/types/theme.ts": [
                {
                    "name": "Animations",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                },
                {
                    "name": "Borders",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                },
                {
                    "name": "Colors",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                },
                {
                    "name": "Effects",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                },
                {
                    "name": "Fonts",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                },
                {
                    "name": "Spacing",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                },
                {
                    "name": "Theme",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "literal type",
                    "file": "src/types/theme.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 188
                }
            ],
            "src/components/base/axis/axis.ts": [
                {
                    "name": "AxisOrientation",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "\"top\" | \"bottom\" | \"left\" | \"right\"",
                    "file": "src/components/base/axis/axis.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 193
                },
                {
                    "name": "AxisScale",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "d3.AxisScale<any>",
                    "file": "src/components/base/axis/axis.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 184
                }
            ],
            "src/components/base/chart-container/chart-container.ts": [
                {
                    "name": "ChartTheme",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "\"glass\" | \"solid\" | \"gradient\"",
                    "file": "src/components/base/chart-container/chart-container.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 193
                }
            ],
            "src/components/base/grid/grid.ts": [
                {
                    "name": "GridOrientation",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "\"horizontal\" | \"vertical\" | \"both\"",
                    "file": "src/components/base/grid/grid.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 193
                }
            ],
            "src/components/base/legend/legend.ts": [
                {
                    "name": "LegendOrientation",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "\"horizontal\" | \"vertical\"",
                    "file": "src/components/base/legend/legend.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 193
                },
                {
                    "name": "LegendPosition",
                    "ctype": "miscellaneous",
                    "subtype": "typealias",
                    "rawtype": "\"top\" | \"bottom\" | \"left\" | \"right\"",
                    "file": "src/components/base/legend/legend.ts",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "description": "",
                    "kind": 193
                }
            ]
        }
    },
    "routes": {
        "name": "<root>",
        "kind": "module",
        "children": []
    },
    "coverage": {
        "count": 1,
        "status": "low",
        "files": [
            {
                "filePath": "src/components/base/axis/axis.ts",
                "type": "component",
                "linktype": "component",
                "name": "Axis",
                "coveragePercent": 0,
                "coverageCount": "0/20",
                "status": "low"
            },
            {
                "filePath": "src/components/base/axis/axis.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "AxisOrientation",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/components/base/axis/axis.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "AxisScale",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/components/base/base-chart.ts",
                "type": "class",
                "linktype": "classe",
                "name": "BaseChart",
                "coveragePercent": 0,
                "coverageCount": "0/20",
                "status": "low"
            },
            {
                "filePath": "src/components/base/base-chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ChartDimensions",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/components/base/base-chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ChartMargin",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/components/base/chart-container/chart-container.ts",
                "type": "component",
                "linktype": "component",
                "name": "ChartContainer",
                "coveragePercent": 0,
                "coverageCount": "0/10",
                "status": "low"
            },
            {
                "filePath": "src/components/base/chart-container/chart-container.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "ChartTheme",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/components/base/grid/grid.ts",
                "type": "component",
                "linktype": "component",
                "name": "Grid",
                "coveragePercent": 0,
                "coverageCount": "0/18",
                "status": "low"
            },
            {
                "filePath": "src/components/base/grid/grid.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "GridOrientation",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/components/base/legend/legend.ts",
                "type": "component",
                "linktype": "component",
                "name": "Legend",
                "coveragePercent": 0,
                "coverageCount": "0/13",
                "status": "low"
            },
            {
                "filePath": "src/components/base/legend/legend.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "LegendItem",
                "coveragePercent": 0,
                "coverageCount": "0/6",
                "status": "low"
            },
            {
                "filePath": "src/components/base/legend/legend.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "LegendOrientation",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/components/base/legend/legend.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "LegendPosition",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/components/base/tooltip/tooltip.ts",
                "type": "component",
                "linktype": "component",
                "name": "Tooltip",
                "coveragePercent": 0,
                "coverageCount": "0/13",
                "status": "low"
            },
            {
                "filePath": "src/components/base/tooltip/tooltip.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "TooltipData",
                "coveragePercent": 0,
                "coverageCount": "0/4",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/area/area.ts",
                "type": "component",
                "linktype": "component",
                "name": "Area",
                "coveragePercent": 0,
                "coverageCount": "0/30",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/area/area.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "AreaChartConfig",
                "coveragePercent": 0,
                "coverageCount": "0/10",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/bar/bar.ts",
                "type": "component",
                "linktype": "component",
                "name": "Bar",
                "coveragePercent": 0,
                "coverageCount": "0/29",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/bar/bar.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "BarChartConfig",
                "coveragePercent": 0,
                "coverageCount": "0/9",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/gauge/gauge.ts",
                "type": "component",
                "linktype": "component",
                "name": "Gauge",
                "coveragePercent": 0,
                "coverageCount": "0/20",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/gauge/gauge.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "GaugeConfig",
                "coveragePercent": 0,
                "coverageCount": "0/7",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/heatmap/heatmap.ts",
                "type": "component",
                "linktype": "component",
                "name": "Heatmap",
                "coveragePercent": 0,
                "coverageCount": "0/28",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/heatmap/heatmap.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "HeatmapConfig",
                "coveragePercent": 0,
                "coverageCount": "0/6",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/line/line.ts",
                "type": "component",
                "linktype": "component",
                "name": "Line",
                "coveragePercent": 0,
                "coverageCount": "0/30",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/line/line.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "LineChartConfig",
                "coveragePercent": 0,
                "coverageCount": "0/10",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/pie/pie.ts",
                "type": "component",
                "linktype": "component",
                "name": "Pie",
                "coveragePercent": 0,
                "coverageCount": "0/22",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/pie/pie.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "PieChartConfig",
                "coveragePercent": 0,
                "coverageCount": "0/9",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/scatter/scatter.ts",
                "type": "component",
                "linktype": "component",
                "name": "Scatter",
                "coveragePercent": 0,
                "coverageCount": "0/29",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/scatter/scatter.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ScatterChartConfig",
                "coveragePercent": 0,
                "coverageCount": "0/10",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/scatter/scatter.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ScatterDataPoint",
                "coveragePercent": 0,
                "coverageCount": "0/7",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/treemap/treemap.ts",
                "type": "component",
                "linktype": "component",
                "name": "Treemap",
                "coveragePercent": 0,
                "coverageCount": "0/21",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/treemap/treemap.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "TreemapConfig",
                "coveragePercent": 0,
                "coverageCount": "0/8",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/treemap/treemap.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "TreemapDataNode",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/wordcloud/wordcloud.ts",
                "type": "component",
                "linktype": "component",
                "name": "WordCloud",
                "coveragePercent": 0,
                "coverageCount": "0/19",
                "status": "low"
            },
            {
                "filePath": "src/components/charts/wordcloud/wordcloud.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "WordCloudConfig",
                "coveragePercent": 0,
                "coverageCount": "0/10",
                "status": "low"
            },
            {
                "filePath": "src/services/theme.ts",
                "type": "injectable",
                "linktype": "injectable",
                "name": "ThemeService",
                "coveragePercent": 0,
                "coverageCount": "0/8",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "AxisConfig",
                "coveragePercent": 0,
                "coverageCount": "0/6",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ChartConfig",
                "coveragePercent": 0,
                "coverageCount": "0/9",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ChartDataPoint",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "ChartEvent",
                "coveragePercent": 0,
                "coverageCount": "0/4",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "GaugeData",
                "coveragePercent": 0,
                "coverageCount": "0/6",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "GaugeThreshold",
                "coveragePercent": 0,
                "coverageCount": "0/4",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "HeatmapDataPoint",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "LegendConfig",
                "coveragePercent": 0,
                "coverageCount": "0/4",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "MultiSeriesDataPoint",
                "coveragePercent": 0,
                "coverageCount": "0/3",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "TimeSeriesDataPoint",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "TooltipConfig",
                "coveragePercent": 0,
                "coverageCount": "0/5",
                "status": "low"
            },
            {
                "filePath": "src/types/chart.ts",
                "type": "interface",
                "linktype": "interface",
                "name": "WordCloudDataPoint",
                "coveragePercent": 0,
                "coverageCount": "0/4",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Animations",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Borders",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Colors",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Effects",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Fonts",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Spacing",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/types/theme.ts",
                "type": "type alias",
                "linktype": "miscellaneous",
                "linksubtype": "typealias",
                "name": "Theme",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/chart-helpers.ts",
                "type": "variable",
                "linktype": "miscellaneous",
                "linksubtype": "variable",
                "name": "calculateLabelRotation",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/chart-helpers.ts",
                "type": "variable",
                "linktype": "miscellaneous",
                "linksubtype": "variable",
                "name": "estimateTextWidth",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/chart-helpers.ts",
                "type": "variable",
                "linktype": "miscellaneous",
                "linksubtype": "variable",
                "name": "formatNumber",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/chart-helpers.ts",
                "type": "variable",
                "linktype": "miscellaneous",
                "linksubtype": "variable",
                "name": "getMaxLabelWidth",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/chart-helpers.ts",
                "type": "variable",
                "linktype": "miscellaneous",
                "linksubtype": "variable",
                "name": "shouldRotateLabels",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/chart-helpers.ts",
                "type": "variable",
                "linktype": "miscellaneous",
                "linksubtype": "variable",
                "name": "truncateText",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "addHoverEffect",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "aggregateData",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "createRoundedRect",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "darkenColor",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "debounce",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "formatDate",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "formatValue",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "generateColorPalette",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "getResponsiveDimensions",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "getScale",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "hexToRgba",
                "coveragePercent": 100,
                "coverageCount": "1/1",
                "status": "very-good"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "lightenColor",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "normalizeData",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "staggeredTransition",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            },
            {
                "filePath": "src/utils/d3-helpers.ts",
                "type": "function",
                "linktype": "miscellaneous",
                "linksubtype": "function",
                "name": "transitionElement",
                "coveragePercent": 0,
                "coverageCount": "0/1",
                "status": "low"
            }
        ]
    }
}