juxscript 1.0.19 → 1.0.21

package/lib/components/areachart.ts

@@ -1,1246 +0,0 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
-import {
-    googleTheme,
-    seriesaTheme,
-    hrTheme,
-    figmaTheme,
-    notionTheme,
-    chalkTheme,
-    mintTheme
-} from '../themes/charts.js';
-
-/**
- * Bar chart data point
- */
-export interface AreaChartDataPoint {
-    label: string;
-    value: number;
-    color?: string;
-}
-
-/**
- * Bar chart options
- */
-export interface AreaChartOptions {
-    data?: AreaChartDataPoint[];
-    title?: string;
-    subtitle?: string;
-    xAxisLabel?: string;
-    yAxisLabel?: string;
-    showTicksX?: boolean;
-    showTicksY?: boolean;
-    showScaleX?: boolean;
-    showScaleY?: boolean;
-    scaleXUnit?: string;
-    scaleYUnit?: string;
-    showLegend?: boolean;
-    legendOrientation?: 'horizontal' | 'vertical';
-    showDataTable?: boolean;
-    showDataLabels?: boolean;
-    animate?: boolean;
-    animationDuration?: number;
-    chartOrientation?: 'vertical' | 'horizontal';  // NEW
-    chartDirection?: 'normal' | 'reverse';  // NEW: normal = bottom-to-top or left-to-right, reverse = opposite
-    width?: number;
-    height?: number;
-    colors?: string[];
-    class?: string;
-    style?: string;
-    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode?: 'default' | 'gradient' | 'glow' | 'glass';
-    borderRadius?: number;
-}
-
-/**
- * Bar chart state
- */
-type AreaChartState = {
-    data: AreaChartDataPoint[];
-    title: string;
-    subtitle: string;
-    xAxisLabel: string;
-    yAxisLabel: string;
-    showTicksX: boolean;
-    showTicksY: boolean;
-    showScaleX: boolean;
-    showScaleY: boolean;
-    scaleXUnit: string;
-    scaleYUnit: string;
-    showLegend: boolean;
-    legendOrientation: 'horizontal' | 'vertical';
-    showDataTable: boolean;
-    showDataLabels: boolean;
-    animate: boolean;
-    animationDuration: number;
-    chartOrientation: 'vertical' | 'horizontal';  // NEW
-    chartDirection: 'normal' | 'reverse';  // NEW
-    width: number;
-    height: number;
-    colors: string[];
-    class: string;
-    style: string;
-    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode: 'default' | 'gradient' | 'glow' | 'glass';
-    borderRadius: number;
-};
-
-/**
- * Bar chart component - Simple SVG-based bar chart
- * 
- * Usage:
- *   jux.areachart('sales-chart')
- *     .data([
- *       { label: 'Jan', value: 100 },
- *       { label: 'Feb', value: 150 },
- *       { label: 'Mar', value: 200 }
- *     ])
- *     .title('Monthly Sales')
- *     .showLegend(true)
- *     .render('#app');
- */
-export class AreaChart {
-    state: AreaChartState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // State bindings
-    private _boundTheme?: State<string>;
-    private _boundStyleMode?: State<string>;
-    private _boundBorderRadius?: State<number>;
-
-    constructor(id: string, options: AreaChartOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        let defaultColors = [
-            '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
-            '#ec4899', '#06b6d4', '#f97316', '#84cc16', '#6366f1'
-        ];
-        // using defaultColors, select a random color from the list.
-        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',  // NEW
-            chartDirection: options.chartDirection ?? 'normal',  // NEW
-            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
-        };
-    }
-
-    /* -------------------------
-     * State Binding Methods
-     * ------------------------- */
-
-    /**
-     * Bind theme to reactive state
-     */
-    bindTheme(stateObj: State<string>): this {
-        this._boundTheme = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.theme(val as any);
-        });
-
-        return this;
-    }
-
-    /**
-     * Bind styleMode to reactive state
-     */
-    bindStyleMode(stateObj: State<string>): this {
-        this._boundStyleMode = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.styleMode(val as any);
-        });
-
-        return this;
-    }
-
-    /**
-     * Bind borderRadius to reactive state
-     */
-    bindBorderRadius(stateObj: State<number>): this {
-        this._boundBorderRadius = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.borderRadius(val);
-        });
-
-        return this;
-    }
-
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    data(value: AreaChartDataPoint[]): 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;
-    }
-
-    showScaleX(value: boolean): this {
-        this.state.showScaleX = value;
-        this._updateChart();
-        return this;
-    }
-
-    showScaleY(value: boolean): this {
-        this.state.showScaleY = value;
-        this._updateChart();
-        return this;
-    }
-
-    scaleXUnit(value: string): this {
-        this.state.scaleXUnit = value;
-        this._updateChart();
-        return this;
-    }
-
-    scaleYUnit(value: string): this {
-        this.state.scaleYUnit = value;
-        this._updateChart();
-        return this;
-    }
-
-    showLegend(value: boolean): this {
-        this.state.showLegend = value;
-        this._updateChart();
-        return this;
-    }
-
-    legendOrientation(value: 'horizontal' | 'vertical'): this {
-        this.state.legendOrientation = value;
-        this._updateChart();
-        return this;
-    }
-
-    showDataTable(value: boolean): this {
-        this.state.showDataTable = value;
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Show/hide value labels on bars
-     */
-    showDataLabels(value: boolean): this {
-        this.state.showDataLabels = value;
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Enable/disable bar grow animation
-     */
-    animate(value: boolean): this {
-        this.state.animate = value;
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Set animation duration in milliseconds
-     */
-    animationDuration(value: number): this {
-        this.state.animationDuration = value;
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Set chart orientation (vertical bars or horizontal bars)
-     */
-    chartOrientation(value: 'vertical' | 'horizontal'): this {
-        this.state.chartOrientation = value;
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Set chart direction (normal or reverse)
-     * For vertical: normal = bottom-to-top, reverse = top-to-bottom
-     * For horizontal: normal = left-to-right, reverse = right-to-left
-     */
-    chartDirection(value: 'normal' | 'reverse'): 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;
-    }
-
-    colors(value: string[]): this {
-        this.state.colors = value;
-        this._updateChart();
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    /**
-     * Set chart theme
-     */
-    theme(value: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint'): this {
-        this.state.theme = value;
-        this._applyTheme(value);
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Set bar style mode
-     */
-    styleMode(value: 'default' | 'gradient' | 'glow' | 'glass'): this {
-        this.state.styleMode = value;
-        this._updateChart();
-        return this;
-    }
-
-    /**
-     * Set border radius for bars (0 = sharp corners, higher = rounder)
-     */
-    borderRadius(value: number): this {
-        this.state.borderRadius = value;
-        this._updateChart();
-        return this;
-    }
-
-    /* -------------------------
-     * Update chart
-     * ------------------------- */
-
-    private _updateChart(): void {
-        if (!this.container) return;
-
-        // Find the wrapper div
-        const wrapper = this.container.querySelector(`#${this._id}`) as HTMLElement;
-        if (!wrapper) return;
-
-        // Clear and rebuild
-        wrapper.innerHTML = '';
-        this._buildChart(wrapper);
-
-        // Reapply theme after rebuild
-        if (this.state.theme) {
-            this._applyThemeToWrapper(wrapper);
-        }
-    }
-
-    private _buildChart(wrapper: HTMLElement): void {
-        const { data, title, subtitle, width, height, showLegend, showDataTable } = this.state;
-
-        // Title
-        if (title) {
-            const titleEl = document.createElement('h3');
-            titleEl.className = 'jux-areachart-title';
-            titleEl.textContent = title;
-            wrapper.appendChild(titleEl);
-        }
-
-        // Subtitle
-        if (subtitle) {
-            const subtitleEl = document.createElement('p');
-            subtitleEl.className = 'jux-areachart-subtitle';
-            subtitleEl.textContent = subtitle;
-            wrapper.appendChild(subtitleEl);
-        }
-
-        // SVG Chart
-        const svg = this._createSVG();
-        wrapper.appendChild(svg);
-
-        // Legend
-        if (showLegend) {
-            const legend = this._createLegend();
-            wrapper.appendChild(legend);
-        }
-
-        // Data Table
-        if (showDataTable) {
-            const table = this._createDataTable();
-            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: AreaChartDataPoint[],
-        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: AreaChartDataPoint[],
-        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: AreaChartDataPoint,
-        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: string): void {
-        const themes: Record<string, any> = {
-            google: googleTheme,
-            seriesa: seriesaTheme,
-            hr: hrTheme,
-            figma: figmaTheme,
-            notion: notionTheme,
-            chalk: chalkTheme,
-            mint: mintTheme
-        };
-
-        const theme = themes[themeName];
-        if (!theme) return;
-
-        // Apply colors
-        // get one color;
-        const randomColor = theme.colors[Math.floor(Math.random() * theme.colors.length)];
-        this.state.colors = [randomColor];
-
-        // Inject base styles (once)
-        const baseStyleId = 'jux-areachart-base-styles';
-        if (!document.getElementById(baseStyleId)) {
-            const style = document.createElement('style');
-            style.id = baseStyleId;
-            style.textContent = this._getBaseStyles();
-            document.head.appendChild(style);
-        }
-
-        // Inject font (once per theme)
-        if (theme.font && !document.querySelector(`link[href="${theme.font}"]`)) {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = theme.font;
-            document.head.appendChild(link);
-        }
-
-        // Apply theme-specific styles
-        const styleId = `jux-areachart-theme-${themeName}`;
-        let styleElement = document.getElementById(styleId) as HTMLStyleElement;
-
-        if (!styleElement) {
-            styleElement = document.createElement('style');
-            styleElement.id = styleId;
-            document.head.appendChild(styleElement);
-        }
-
-        // Generate CSS with theme variables
-        const variablesCSS = Object.entries(theme.variables)
-            .map(([key, value]) => `  ${key}: ${value};`)
-            .join('\n');
-
-        styleElement.textContent = `
-.jux-areachart.theme-${themeName} {
-${variablesCSS}
-}
-`;
-    }
-
-    private _applyThemeToWrapper(wrapper: HTMLElement): void {
-        if (!this.state.theme) return;
-
-        // Remove old theme classes
-        wrapper.classList.remove('theme-google', 'theme-seriesa', 'theme-hr', 'theme-figma', 'theme-notion', 'theme-chalk', 'theme-mint');
-
-        // Add new theme class
-        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: AreaChartOptions = {}): AreaChart {
-    return new AreaChart(id, options);
-}