juxscript 1.0.20 → 1.0.21

package/lib/components/areachart.ts

@@ -1,1128 +0,0 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
-import {
-    ChartDataPoint,
-    BarAreaChartOptions,
-    BarAreaChartState,
-    ChartTheme,
-    ChartStyleMode,
-    ChartOrientation,
-    ChartDirection,
-    LegendOrientation,
-    ChartPropertyMapping,
-    ChartStateObject
-} from './chart-types.js';
-import {
-    lightenColor,
-    getThemeConfig,
-    createLegend,
-    createDataTable,
-    applyThemeStyles
-} from './chart-utils.js';
-
-// Re-export for convenience
-export type { ChartDataPoint as AreaChartDataPoint };
-export type { BarAreaChartOptions as AreaChartOptions };
-
-/**
- * Area chart component - Simple SVG-based area chart
- */
-export class AreaChart {
-    state: BarAreaChartState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    constructor(id: string, options: BarAreaChartOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        let defaultColors = [
-            '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
-            '#ec4899', '#06b6d4', '#f97316', '#84cc16', '#6366f1'
-        ];
-        const randomColor = defaultColors[Math.floor(Math.random() * defaultColors.length)];
-        defaultColors = [randomColor];
-
-        this.state = {
-            data: options.data ?? [],
-            title: options.title ?? '',
-            subtitle: options.subtitle ?? '',
-            xAxisLabel: options.xAxisLabel ?? '',
-            yAxisLabel: options.yAxisLabel ?? '',
-            showTicksX: options.showTicksX ?? true,
-            showTicksY: options.showTicksY ?? true,
-            showScaleX: options.showScaleX ?? true,
-            showScaleY: options.showScaleY ?? true,
-            scaleXUnit: options.scaleXUnit ?? '',
-            scaleYUnit: options.scaleYUnit ?? '',
-            showLegend: options.showLegend ?? false,
-            legendOrientation: options.legendOrientation ?? 'horizontal',
-            showDataTable: options.showDataTable ?? false,
-            showDataLabels: options.showDataLabels ?? true,
-            animate: options.animate ?? true,
-            animationDuration: options.animationDuration ?? 800,
-            chartOrientation: options.chartOrientation ?? 'vertical',
-            chartDirection: options.chartDirection ?? 'normal',
-            width: options.width ?? 600,
-            height: options.height ?? 400,
-            colors: options.colors ?? defaultColors,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            theme: options.theme,
-            styleMode: options.styleMode ?? 'default',
-            borderRadius: options.borderRadius ?? 4
-        };
-    }
-
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    data(value: ChartDataPoint[]): this {
-        this.state.data = value;
-        this._updateChart();
-        return this;
-    }
-
-    title(value: string): this {
-        this.state.title = value;
-        this._updateChart();
-        return this;
-    }
-
-    subtitle(value: string): this {
-        this.state.subtitle = value;
-        this._updateChart();
-        return this;
-    }
-
-    xAxisLabel(value: string): this {
-        this.state.xAxisLabel = value;
-        this._updateChart();
-        return this;
-    }
-
-    yAxisLabel(value: string): this {
-        this.state.yAxisLabel = value;
-        this._updateChart();
-        return this;
-    }
-
-    showTicksX(value: boolean): this {
-        this.state.showTicksX = value;
-        this._updateChart();
-        return this;
-    }
-
-    showTicksY(value: boolean): this {
-        this.state.showTicksY = value;
-        this._updateChart();
-        return this;
-    }
-
-    showLegend(value: boolean): this {
-        this.state.showLegend = value;
-        this._updateChart();
-        return this;
-    }
-
-    legendOrientation(value: LegendOrientation): this {
-        this.state.legendOrientation = value;
-        this._updateChart();
-        return this;
-    }
-
-    showDataTable(value: boolean): this {
-        this.state.showDataTable = value;
-        this._updateChart();
-        return this;
-    }
-
-    showDataLabels(value: boolean): this {
-        this.state.showDataLabels = value;
-        this._updateChart();
-        return this;
-    }
-
-    animate(value: boolean): this {
-        this.state.animate = value;
-        this._updateChart();
-        return this;
-    }
-
-    animationDuration(value: number): this {
-        this.state.animationDuration = value;
-        this._updateChart();
-        return this;
-    }
-
-    chartOrientation(value: ChartOrientation): this {
-        this.state.chartOrientation = value;
-        this._updateChart();
-        return this;
-    }
-
-    chartDirection(value: ChartDirection): this {
-        this.state.chartDirection = value;
-        this._updateChart();
-        return this;
-    }
-
-    width(value: number): this {
-        this.state.width = value;
-        this._updateChart();
-        return this;
-    }
-
-    height(value: number): this {
-        this.state.height = value;
-        this._updateChart();
-        return this;
-    }
-
-    theme(value: ChartTheme): this {
-        this.state.theme = value;
-        this._applyTheme(value);
-        this._updateChart();
-        return this;
-    }
-
-    styleMode(value: ChartStyleMode): this {
-        this.state.styleMode = value;
-        this._updateChart();
-        return this;
-    }
-
-    borderRadius(value: number): this {
-        this.state.borderRadius = value;
-        this._updateChart();
-        return this;
-    }
-
-    /* -------------------------
-     * Reactivity Support
-     * ------------------------- */
-
-    /**
-     * Sync a single property to a state object
-     */
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-            const transformed = transform(val);
-
-            // Map property to correct method
-            switch (property) {
-                case 'data': this.data(transformed); break;
-                case 'title': this.title(transformed); break;
-                case 'subtitle': this.subtitle(transformed); break;
-                case 'width': this.width(transformed); break;
-                case 'height': this.height(transformed); break;
-                case 'theme': this.theme(transformed); break;
-                case 'styleMode': this.styleMode(transformed); break;
-                case 'borderRadius': this.borderRadius(transformed); break;
-                case 'showTicksX': this.showTicksX(transformed); break;
-                case 'showTicksY': this.showTicksY(transformed); break;
-                case 'showLegend': this.showLegend(transformed); break;
-                case 'showDataLabels': this.showDataLabels(transformed); break;
-                case 'showDataTable': this.showDataTable(transformed); break;
-                case 'animate': this.animate(transformed); break;
-                case 'animationDuration': this.animationDuration(transformed); break;
-                case 'legendOrientation': this.legendOrientation(transformed); break;
-                case 'chartOrientation': this.chartOrientation(transformed); break;
-                case 'chartDirection': this.chartDirection(transformed); break;
-            }
-        });
-
-        return this;
-    }
-
-    /**
-     * Sync multiple properties from a state object
-     * 
-     * @param stateObject - Object containing State instances for each property
-     * @param mapping - Optional mapping of state keys to component method names
-     * 
-     * @example
-     * // Auto-mapping (state keys match method names)
-     * chart.syncState(chartStates);
-     * 
-     * @example
-     * // Custom mapping
-     * chart.syncState(chartStates, {
-     *   chartTheme: 'theme',
-     *   chartTitle: 'title',
-     *   chartWidth: 'width'
-     * });
-     * 
-     * @example
-     * // Function mapping for transforms
-     * chart.syncState(chartStates, {
-     *   chartWidth: (value) => chart.width(Number(value))
-     * });
-     */
-    syncState(stateObject: ChartStateObject, mapping?: ChartPropertyMapping): this {
-        // Default mapping: camelCase state names to method names
-        const defaultMapping: ChartPropertyMapping = {
-            chartType: 'type',           // Not used in area chart, ignored
-            chartTheme: 'theme',
-            chartStyleMode: 'styleMode',
-            borderRadius: 'borderRadius',
-            chartTitle: 'title',
-            chartWidth: 'width',
-            chartHeight: 'height',
-            showTicksX: 'showTicksX',
-            showTicksY: 'showTicksY',
-            showLegend: 'showLegend',
-            showDataTable: 'showDataTable',
-            showDataLabels: 'showDataLabels',
-            animate: 'animate',
-            animationDuration: 'animationDuration',
-            legendOrientation: 'legendOrientation',
-            chartOrientation: 'chartOrientation',
-            chartDirection: 'chartDirection'
-        };
-
-        const finalMapping = { ...defaultMapping, ...mapping };
-
-        // Iterate through state object and bind each property
-        Object.entries(stateObject).forEach(([key, stateObj]) => {
-            if (!stateObj || typeof stateObj.subscribe !== 'function') {
-                console.warn(`AreaChart.syncState: "${key}" is not a valid State object`);
-                return;
-            }
-
-            const methodOrFunction = finalMapping[key];
-
-            if (!methodOrFunction) {
-                console.warn(`AreaChart.syncState: No mapping found for "${key}"`);
-                return;
-            }
-
-            if (typeof methodOrFunction === 'function') {
-                // Custom function mapping
-                stateObj.subscribe(methodOrFunction);
-            } else {
-                // String mapping to method name
-                const methodName = methodOrFunction as keyof this;
-                const method = this[methodName];
-
-                if (typeof method !== 'function') {
-                    console.warn(`AreaChart.syncState: Method "${String(methodName)}" not found`);
-                    return;
-                }
-
-                stateObj.subscribe((val: any) => {
-                    (method as Function).call(this, val);
-                });
-            }
-        });
-
-        return this;
-    }
-
-    /* -------------------------
-     * Internal Methods
-     * ------------------------- */
-
-    private _updateChart(): void {
-        if (!this.container) return;
-
-        const wrapper = this.container.querySelector(`#${this._id}`) as HTMLElement;
-        if (!wrapper) return;
-
-        wrapper.innerHTML = '';
-        this._buildChart(wrapper);
-
-        if (this.state.theme) {
-            this._applyThemeToWrapper(wrapper);
-        }
-    }
-
-    private _buildChart(wrapper: HTMLElement): void {
-        const { title, subtitle, showLegend, showDataTable } = this.state;
-
-        if (title) {
-            const titleEl = document.createElement('h3');
-            titleEl.className = 'jux-areachart-title';
-            titleEl.textContent = title;
-            wrapper.appendChild(titleEl);
-        }
-
-        if (subtitle) {
-            const subtitleEl = document.createElement('p');
-            subtitleEl.className = 'jux-areachart-subtitle';
-            subtitleEl.textContent = subtitle;
-            wrapper.appendChild(subtitleEl);
-        }
-
-        const svg = this._createSVG();
-        wrapper.appendChild(svg);
-
-        if (showLegend) {
-            const legend = createLegend(this.state.data, this.state.colors, 'jux-areachart');
-            wrapper.appendChild(legend);
-        }
-
-        if (showDataTable) {
-            const table = createDataTable(
-                this.state.data,
-                this.state.xAxisLabel,
-                this.state.yAxisLabel,
-                'jux-areachart'
-            );
-            wrapper.appendChild(table);
-        }
-    }
-
-    private _createSVG(): SVGSVGElement {
-        const {
-            data, width, height, colors, xAxisLabel, yAxisLabel,
-            showTicksX, showTicksY, showScaleX, showScaleY, scaleYUnit,
-            styleMode, borderRadius, showDataLabels, animate, animationDuration,
-            chartOrientation, chartDirection
-        } = this.state;
-
-        if (!data.length) {
-            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            svg.setAttribute('width', width.toString());
-            svg.setAttribute('height', height.toString());
-            svg.setAttribute('class', 'jux-areachart-svg');
-            return svg;
-        }
-
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', width.toString());
-        svg.setAttribute('height', height.toString());
-        svg.setAttribute('class', 'jux-areachart-svg');
-
-        // Add animation styles to SVG
-        if (animate) {
-            const animationId = `bar-grow-${this._id}`;
-            const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-
-            // Different animation based on orientation and direction
-            let transformOrigin = 'bottom';
-            let scaleAxis = 'scaleY';
-
-            if (chartOrientation === 'horizontal') {
-                if (chartDirection === 'normal') {
-                    transformOrigin = 'left';
-                    scaleAxis = 'scaleX';
-                } else {
-                    transformOrigin = 'right';
-                    scaleAxis = 'scaleX';
-                }
-            } else {
-                if (chartDirection === 'reverse') {
-                    transformOrigin = 'top';
-                    scaleAxis = 'scaleY';
-                }
-            }
-
-            style.textContent = `
-                @keyframes ${animationId} {
-                    from {
-                        transform: ${scaleAxis}(0);
-                        opacity: 0;
-                    }
-                    to {
-                        transform: ${scaleAxis}(1);
-                        opacity: 1;
-                    }
-                }
-                .jux-bar-animated {
-                    transform-origin: ${transformOrigin};
-                    animation: ${animationId} ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-                }
-                .jux-label-animated {
-                    opacity: 0;
-                    animation: fadeIn ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-                }
-                @keyframes fadeIn {
-                    from { opacity: 0; }
-                    to { opacity: 1; }
-                }
-            `;
-            svg.appendChild(style);
-        }
-
-        // Calculate dimensions
-        const padding = { top: 40, right: 40, bottom: 60, left: 60 };
-        const chartWidth = width - padding.left - padding.right;
-        const chartHeight = height - padding.top - padding.bottom;
-
-        const maxValue = Math.max(...data.map(d => d.value));
-
-        // Determine if we're working with vertical or horizontal layout
-        const isVertical = chartOrientation === 'vertical';
-        const isReverse = chartDirection === 'reverse';
-
-        if (isVertical) {
-            // VERTICAL BARS (original logic with direction support)
-            this._renderVerticalBars(svg, data, colors, padding, chartWidth, chartHeight, maxValue, isReverse);
-        } else {
-            // HORIZONTAL BARS (new logic)
-            this._renderHorizontalBars(svg, data, colors, padding, chartWidth, chartHeight, maxValue, isReverse);
-        }
-
-        return svg;
-    }
-
-    private _renderVerticalBars(
-        svg: SVGSVGElement,
-        data: ChartDataPoint[],
-        colors: string[],
-        padding: { top: number, right: number, bottom: number, left: number },
-        chartWidth: number,
-        chartHeight: number,
-        maxValue: number,
-        isReverse: boolean
-    ): void {
-        const { width, height, xAxisLabel, yAxisLabel, showTicksX, showTicksY, showScaleX, showScaleY, scaleYUnit, styleMode, borderRadius, showDataLabels, animate, animationDuration } = this.state;
-
-        const yScale = chartHeight / maxValue;
-        const barWidth = chartWidth / data.length;
-        const barGap = barWidth * 0;
-        const actualBarWidth = barWidth - barGap;
-
-        // Y-axis
-        if (showScaleY) {
-            const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            yAxis.setAttribute('x1', padding.left.toString());
-            yAxis.setAttribute('y1', padding.top.toString());
-            yAxis.setAttribute('x2', padding.left.toString());
-            yAxis.setAttribute('y2', (height - padding.bottom).toString());
-            yAxis.setAttribute('stroke', '#9ca3af');
-            yAxis.setAttribute('stroke-width', '2');
-            svg.appendChild(yAxis);
-
-            // Y-axis label
-            if (yAxisLabel && showTicksY) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', '20');
-                label.setAttribute('y', (padding.top + chartHeight / 2).toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('transform', `rotate(-90, 20, ${padding.top + chartHeight / 2})`);
-                label.setAttribute('fill', '#6b7280');
-                label.setAttribute('font-size', '12');
-                label.setAttribute('font-weight', '500');
-                label.setAttribute('font-family', 'inherit');
-                label.textContent = yAxisLabel;
-                svg.appendChild(label);
-            }
-
-            // Y-axis ticks
-            if (showTicksY) {
-                const numTicks = 5;
-                for (let i = 0; i <= numTicks; i++) {
-                    const value = (maxValue / numTicks) * i;
-                    const y = isReverse
-                        ? padding.top + (value * yScale)
-                        : height - padding.bottom - (value * yScale);
-
-                    // Grid line
-                    const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                    gridLine.setAttribute('x1', padding.left.toString());
-                    gridLine.setAttribute('y1', y.toString());
-                    gridLine.setAttribute('x2', (width - padding.right).toString());
-                    gridLine.setAttribute('y2', y.toString());
-                    gridLine.setAttribute('stroke', '#e5e7eb');
-                    gridLine.setAttribute('stroke-width', '1');
-                    gridLine.setAttribute('stroke-dasharray', '4,4');
-                    svg.appendChild(gridLine);
-
-                    // Tick label
-                    const tickLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                    tickLabel.setAttribute('x', (padding.left - 10).toString());
-                    tickLabel.setAttribute('y', (y + 4).toString());
-                    tickLabel.setAttribute('text-anchor', 'end');
-                    tickLabel.setAttribute('fill', '#6b7280');
-                    tickLabel.setAttribute('font-size', '11');
-                    tickLabel.setAttribute('font-family', 'inherit');
-                    tickLabel.textContent = Math.round(value).toString() + (scaleYUnit || '');
-                    svg.appendChild(tickLabel);
-                }
-            }
-        }
-
-        // X-axis
-        if (showScaleX) {
-            const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            const axisY = isReverse ? padding.top : height - padding.bottom;
-            xAxis.setAttribute('x1', padding.left.toString());
-            xAxis.setAttribute('y1', axisY.toString());
-            xAxis.setAttribute('x2', (width - padding.right).toString());
-            xAxis.setAttribute('y2', axisY.toString());
-            xAxis.setAttribute('stroke', '#9ca3af');
-            xAxis.setAttribute('stroke-width', '2');
-            svg.appendChild(xAxis);
-
-            // X-axis label
-            if (xAxisLabel && showTicksX) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', (padding.left + chartWidth / 2).toString());
-                label.setAttribute('y', (height - 15).toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('fill', '#6b7280');
-                label.setAttribute('font-size', '12');
-                label.setAttribute('font-weight', '500');
-                label.setAttribute('font-family', 'inherit');
-                label.textContent = xAxisLabel;
-                svg.appendChild(label);
-            }
-        }
-
-        // Bars
-        data.forEach((point, index) => {
-            const x = padding.left + (index * barWidth) + (barGap / 2);
-            const barHeight = point.value * yScale;
-            const y = isReverse
-                ? padding.top
-                : height - padding.bottom - barHeight;
-            const color = point.color || colors[index % colors.length];
-
-            this._renderBar(svg, x, y, actualBarWidth, barHeight, color, index, point, isReverse ? 'bottom' : 'top');
-        });
-    }
-
-    private _renderHorizontalBars(
-        svg: SVGSVGElement,
-        data: ChartDataPoint[],
-        colors: string[],
-        padding: { top: number, right: number, bottom: number, left: number },
-        chartWidth: number,
-        chartHeight: number,
-        maxValue: number,
-        isReverse: boolean
-    ): void {
-        const { width, height, xAxisLabel, yAxisLabel, showTicksX, showTicksY, showScaleX, showScaleY, scaleXUnit, styleMode, borderRadius, showDataLabels, animate, animationDuration } = this.state;
-
-        const xScale = chartWidth / maxValue;
-        const barHeight = chartHeight / data.length;
-        const barGap = barHeight * 0.2;
-        const actualBarHeight = barHeight - barGap;
-
-        // X-axis (now the value axis) - use yAxisLabel since values are horizontal
-        if (showScaleX) {
-            const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            const axisX = isReverse ? width - padding.right : padding.left;
-            xAxis.setAttribute('x1', axisX.toString());
-            xAxis.setAttribute('y1', padding.top.toString());
-            xAxis.setAttribute('x2', axisX.toString());
-            xAxis.setAttribute('y2', (height - padding.bottom).toString());
-            xAxis.setAttribute('stroke', '#9ca3af');
-            xAxis.setAttribute('stroke-width', '2');
-            svg.appendChild(xAxis);
-
-            // X-axis label (use yAxisLabel for values in horizontal mode)
-            if (yAxisLabel && showTicksX) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', (padding.left + chartWidth / 2).toString());
-                label.setAttribute('y', (height - 15).toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('fill', '#6b7280');
-                label.setAttribute('font-size', '12');
-                label.setAttribute('font-weight', '500');
-                label.setAttribute('font-family', 'inherit');
-                label.textContent = yAxisLabel;
-                svg.appendChild(label);
-            }
-
-            // X-axis ticks
-            if (showTicksX) {
-                const numTicks = 5;
-                for (let i = 0; i <= numTicks; i++) {
-                    const value = (maxValue / numTicks) * i;
-                    const x = isReverse
-                        ? width - padding.right - (value * xScale)
-                        : padding.left + (value * xScale);
-
-                    // Grid line
-                    const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                    gridLine.setAttribute('x1', x.toString());
-                    gridLine.setAttribute('y1', padding.top.toString());
-                    gridLine.setAttribute('x2', x.toString());
-                    gridLine.setAttribute('y2', (height - padding.bottom).toString());
-                    gridLine.setAttribute('stroke', '#e5e7eb');
-                    gridLine.setAttribute('stroke-width', '1');
-                    gridLine.setAttribute('stroke-dasharray', '4,4');
-                    svg.appendChild(gridLine);
-
-                    // Tick label (use scaleXUnit since values are on x-axis now)
-                    const tickLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                    tickLabel.setAttribute('x', x.toString());
-                    tickLabel.setAttribute('y', (height - padding.bottom + 20).toString());
-                    tickLabel.setAttribute('text-anchor', 'middle');
-                    tickLabel.setAttribute('fill', '#6b7280');
-                    tickLabel.setAttribute('font-size', '11');
-                    tickLabel.setAttribute('font-family', 'inherit');
-                    tickLabel.textContent = Math.round(value).toString() + (scaleXUnit || '');
-                    svg.appendChild(tickLabel);
-                }
-            }
-        }
-
-        // Y-axis (now the category axis) - use xAxisLabel since categories are vertical
-        if (showScaleY) {
-            const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            yAxis.setAttribute('x1', padding.left.toString());
-            yAxis.setAttribute('y1', padding.top.toString());
-            yAxis.setAttribute('x2', padding.left.toString());
-            yAxis.setAttribute('y2', (height - padding.bottom).toString());
-            yAxis.setAttribute('stroke', '#9ca3af');
-            yAxis.setAttribute('stroke-width', '2');
-            svg.appendChild(yAxis);
-
-            // Y-axis label (use xAxisLabel for categories in horizontal mode)
-            if (xAxisLabel && showTicksY) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', '20');
-                label.setAttribute('y', (padding.top + chartHeight / 2).toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('transform', `rotate(-90, 20, ${padding.top + chartHeight / 2})`);
-                label.setAttribute('fill', '#6b7280');
-                label.setAttribute('font-size', '12');
-                label.setAttribute('font-weight', '500');
-                label.setAttribute('font-family', 'inherit');
-                label.textContent = xAxisLabel;
-                svg.appendChild(label);
-            }
-        }
-
-        // Bars
-        data.forEach((point, index) => {
-            const y = padding.top + (index * barHeight) + (barGap / 2);
-            const barWidth = point.value * xScale;
-            const x = isReverse
-                ? width - padding.right - barWidth
-                : padding.left;
-            const color = point.color || colors[index % colors.length];
-
-            this._renderBar(svg, x, y, barWidth, actualBarHeight, color, index, point, isReverse ? 'right' : 'left', true);
-
-            // Category label
-            if (showTicksY && showScaleY) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', (padding.left - 10).toString());
-                label.setAttribute('y', (y + actualBarHeight / 2 + 4).toString());
-                label.setAttribute('text-anchor', 'end');
-                label.setAttribute('fill', '#6b7280');
-                label.setAttribute('font-size', '11');
-                label.setAttribute('font-family', 'inherit');
-                label.textContent = point.label;
-
-                if (animate) {
-                    label.classList.add('jux-label-animated');
-                    label.style.animationDelay = `${index * 100 + 200}ms`;
-                }
-
-                svg.appendChild(label);
-            }
-        });
-    }
-
-    private _renderBar(
-        svg: SVGSVGElement,
-        x: number,
-        y: number,
-        width: number,
-        height: number,
-        color: string,
-        index: number,
-        point: ChartDataPoint,
-        labelPosition: 'top' | 'bottom' | 'left' | 'right',
-        isHorizontal: boolean = false
-    ): void {
-        const { styleMode, borderRadius, showDataLabels, animate, animationDuration } = this.state;
-
-        const shouldUseGroup = (styleMode === 'glass' || styleMode === 'glow') && animate;
-        let animationTarget: SVGElement;
-
-        if (shouldUseGroup) {
-            const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-            animationTarget = group;
-            if (animate) {
-                group.classList.add('jux-bar-animated');
-                group.style.animationDelay = `${index * 100}ms`;
-            }
-            svg.appendChild(group);
-        }
-
-        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        rect.setAttribute('x', x.toString());
-        rect.setAttribute('y', y.toString());
-        rect.setAttribute('width', width.toString());
-        rect.setAttribute('height', height.toString());
-        // rect.setAttribute('rx', borderRadius.toString());
-        // rect.setAttribute('ry', borderRadius.toString());
-
-        if (!shouldUseGroup && animate) {
-            rect.classList.add('jux-bar-animated');
-            rect.style.animationDelay = `${index * 100}ms`;
-        }
-
-        // Apply style modes (same as before)
-        if (styleMode === 'gradient') {
-            const gradientId = `gradient-${this._id}-${index}`;
-            const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
-            gradient.setAttribute('id', gradientId);
-
-            if (isHorizontal) {
-                gradient.setAttribute('x1', '0%');
-                gradient.setAttribute('y1', '0%');
-                gradient.setAttribute('x2', '100%');
-                gradient.setAttribute('y2', '0%');
-            } else {
-                gradient.setAttribute('x1', '0%');
-                gradient.setAttribute('y1', '0%');
-                gradient.setAttribute('x2', '0%');
-                gradient.setAttribute('y2', '100%');
-            }
-
-            const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
-            stop1.setAttribute('offset', '0%');
-            stop1.setAttribute('stop-color', color);
-            stop1.setAttribute('stop-opacity', '1');
-
-            const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
-            stop2.setAttribute('offset', '100%');
-            stop2.setAttribute('stop-color', this._lightenColor(color, 40));
-            stop2.setAttribute('stop-opacity', '1');
-
-            gradient.appendChild(stop1);
-            gradient.appendChild(stop2);
-            svg.appendChild(gradient);
-
-            rect.setAttribute('fill', `url(#${gradientId})`);
-        } else if (styleMode === 'glow') {
-            rect.setAttribute('fill', color);
-            const filterId = `glow-${this._id}-${index}`;
-            const defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-            if (!svg.querySelector('defs')) {
-                svg.insertBefore(defs, svg.firstChild);
-            }
-
-            const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
-            filter.setAttribute('id', filterId);
-            filter.setAttribute('x', '-50%');
-            filter.setAttribute('y', '-50%');
-            filter.setAttribute('width', '200%');
-            filter.setAttribute('height', '200%');
-
-            const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
-            feGaussianBlur.setAttribute('in', 'SourceGraphic');
-            feGaussianBlur.setAttribute('stdDeviation', '4');
-            feGaussianBlur.setAttribute('result', 'blur');
-
-            const feFlood = document.createElementNS('http://www.w3.org/2000/svg', 'feFlood');
-            feFlood.setAttribute('flood-color', color);
-            feFlood.setAttribute('result', 'color');
-
-            const feComposite = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
-            feComposite.setAttribute('in', 'color');
-            feComposite.setAttribute('in2', 'blur');
-            feComposite.setAttribute('operator', 'in');
-            feComposite.setAttribute('result', 'glow');
-
-            const feMerge = document.createElementNS('http://www.w3.org/2000/svg', 'feMerge');
-            const feMergeNode1 = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode');
-            feMergeNode1.setAttribute('in', 'glow');
-            const feMergeNode2 = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode');
-            feMergeNode2.setAttribute('in', 'SourceGraphic');
-            feMerge.appendChild(feMergeNode1);
-            feMerge.appendChild(feMergeNode2);
-
-            filter.appendChild(feGaussianBlur);
-            filter.appendChild(feFlood);
-            filter.appendChild(feComposite);
-            filter.appendChild(feMerge);
-            defs.appendChild(filter);
-
-            rect.setAttribute('filter', `url(#${filterId})`);
-        } else if (styleMode === 'glass') {
-            rect.setAttribute('fill', color);
-            rect.setAttribute('fill-opacity', '0.6');
-            rect.setAttribute('stroke', color);
-            rect.setAttribute('stroke-width', '0');
-            rect.setAttribute('stroke-opacity', '0.8');
-        } else {
-            rect.setAttribute('fill', color);
-        }
-
-        if (shouldUseGroup) {
-            animationTarget.appendChild(rect);
-        } else {
-            svg.appendChild(rect);
-        }
-
-        // Value labels
-        if (showDataLabels) {
-            const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
-            if (isHorizontal) {
-                // For horizontal bars, place label in the middle of the bar
-                valueLabel.setAttribute('x', (x + width / 2).toString());
-                valueLabel.setAttribute('y', (y + height / 2 + 4).toString());
-                valueLabel.setAttribute('text-anchor', 'middle');
-                valueLabel.setAttribute('fill', '#ffffff');
-                valueLabel.setAttribute('font-weight', '700');
-            } else {
-                valueLabel.setAttribute('x', (x + width / 2).toString());
-                if (labelPosition === 'top') {
-                    valueLabel.setAttribute('y', (y - 5).toString());
-                } else {
-                    valueLabel.setAttribute('y', (y + height + 15).toString());
-                }
-                valueLabel.setAttribute('text-anchor', 'middle');
-                valueLabel.setAttribute('fill', '#374151');
-                valueLabel.setAttribute('font-weight', '600');
-            }
-
-            valueLabel.setAttribute('font-size', '11');
-            valueLabel.setAttribute('font-family', 'inherit');
-            valueLabel.textContent = point.value.toString();
-
-            if (animate) {
-                valueLabel.classList.add('jux-label-animated');
-                valueLabel.style.animationDelay = `${index * 100 + animationDuration - 200}ms`;
-            }
-
-            svg.appendChild(valueLabel);
-        }
-    }
-
-    /* -------------------------
-     * Legend and Data Table
-     * ------------------------- */
-
-    private _createLegend(): HTMLElement {
-        const { data, colors, legendOrientation } = this.state;
-
-        const legend = document.createElement('div');
-        legend.className = 'jux-areachart-legend';
-
-        data.forEach((point, index) => {
-            const color = point.color || colors[index % colors.length];
-
-            const item = document.createElement('div');
-            item.className = 'jux-areachart-legend-item';
-
-            const swatch = document.createElement('div');
-            swatch.className = 'jux-areachart-legend-swatch';
-            swatch.style.background = color;
-
-            const label = document.createElement('span');
-            label.className = 'jux-areachart-legend-label';
-            label.textContent = point.label;
-
-            item.appendChild(swatch);
-            item.appendChild(label);
-            legend.appendChild(item);
-        });
-
-        return legend;
-    }
-
-    private _createDataTable(): HTMLElement {
-        const { data, xAxisLabel, yAxisLabel, chartOrientation } = this.state;
-
-        const table = document.createElement('table');
-        table.className = 'jux-areachart-table';
-
-        const thead = document.createElement('thead');
-        const headerRow = document.createElement('tr');
-
-        // Swap headers based on orientation
-        const columnHeaders = chartOrientation === 'horizontal'
-            ? [yAxisLabel || 'Label', xAxisLabel || 'Value']
-            : [xAxisLabel || 'Label', yAxisLabel || 'Value'];
-
-        columnHeaders.forEach(text => {
-            const th = document.createElement('th');
-            th.textContent = text;
-            headerRow.appendChild(th);
-        });
-        thead.appendChild(headerRow);
-        table.appendChild(thead);
-
-        const tbody = document.createElement('tbody');
-        data.forEach(point => {
-            const row = document.createElement('tr');
-
-            const labelCell = document.createElement('td');
-            labelCell.textContent = point.label;
-
-            const valueCell = document.createElement('td');
-            valueCell.textContent = point.value.toString();
-
-            row.appendChild(labelCell);
-            row.appendChild(valueCell);
-            tbody.appendChild(row);
-        });
-        table.appendChild(tbody);
-
-        return table;
-    }
-
-    private _lightenColor(color: string, percent: number): string {
-        const num = parseInt(color.replace('#', ''), 16);
-        const r = Math.min(255, Math.floor((num >> 16) + ((255 - (num >> 16)) * percent / 100)));
-        const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) + ((255 - ((num >> 8) & 0x00FF)) * percent / 100)));
-        const b = Math.min(255, Math.floor((num & 0x0000FF) + ((255 - (num & 0x0000FF)) * percent / 100)));
-        return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
-    }
-
-    private _applyTheme(themeName: ChartTheme): void {
-        const theme = getThemeConfig(themeName);
-        if (!theme) return;
-
-        const randomColor = theme.colors[Math.floor(Math.random() * theme.colors.length)];
-        this.state.colors = [randomColor];
-
-        applyThemeStyles(themeName, 'jux-areachart', this._getBaseStyles());
-    }
-
-    private _applyThemeToWrapper(wrapper: HTMLElement): void {
-        if (!this.state.theme) return;
-
-        wrapper.classList.remove('theme-google', 'theme-seriesa', 'theme-hr', 'theme-figma', 'theme-notion', 'theme-chalk', 'theme-mint');
-        wrapper.classList.add(`theme-${this.state.theme}`);
-    }
-
-    private _getBaseStyles(): string {
-        return `
-.jux-areachart {
-  font-family: var(--chart-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  display: inline-block;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: white;
-    padding: 24px;
-}
-
-.jux-areachart-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  font-family: inherit;
-}
-
-.jux-areachart-subtitle {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-  font-family: inherit;
-}
-
-.jux-areachart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 1rem;
-  justify-content: center;
-}
-
-.jux-areachart-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.jux-areachart-legend-swatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 2px;
-}
-
-.jux-areachart-legend-label {
-  font-size: 0.875rem;
-  color: #374151;
-  font-family: inherit;
-}
-
-.jux-areachart-table {
-  width: 100%;
-  margin-top: 1rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-  font-family: inherit;
-}
-
-.jux-areachart-table thead th {
-  text-align: left;
-  padding: 0.5rem;
-  border-bottom: 2px solid #e5e7eb;
-  font-weight: 600;
-  text-align: center;
-}
-
-.jux-areachart-table tbody td {
-  padding: 0.5rem;
-  border-bottom: 1px solid #f3f4f6;
-  text-align: center;
-}
-
-.jux-areachart-svg {
-  font-family: inherit;
-}
-`;
-    }
-
-    render(targetId?: string | HTMLElement): this {
-        // Apply theme first if set
-        if (this.state.theme) {
-            this._applyTheme(this.state.theme);
-        }
-
-        let container: HTMLElement;
-
-        if (targetId) {
-            if (targetId instanceof HTMLElement) {
-                container = targetId;
-            } else {
-                const target = document.querySelector(targetId);
-                if (!target || !(target instanceof HTMLElement)) {
-                    throw new Error(`AreaChart: Target element "${targetId}" not found`);
-                }
-                container = target;
-            }
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-
-        this.container = container;
-        const { class: className, style } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.id = this._id;
-        wrapper.className = 'jux-areachart';
-
-        // Add theme class
-        if (this.state.theme) {
-            wrapper.classList.add(`theme-${this.state.theme}`);
-        }
-
-        // Add custom class
-        if (className) {
-            wrapper.classList.add(...className.split(' '));
-        }
-
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
-
-        container.appendChild(wrapper);
-
-        // Build chart content
-        this._buildChart(wrapper);
-
-        return this;
-    }
-}
-
-export function areachart(id: string, options: BarAreaChartOptions = {}): AreaChart {
-    return new AreaChart(id, options);
-}