juxscript 1.0.6 → 1.0.8

package/lib/components/areachartsmooth.ts

@@ -0,0 +1,1380 @@
+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 AreaChartSmoothDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+/**
+ * Bar chart options
+ */
+export interface AreaChartSmoothOptions {
+    data?: AreaChartSmoothDataPoint[];
+    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 AreaChartSmoothState = {
+    data: AreaChartSmoothDataPoint[];
+    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.areachartsmooth('sales-chart')
+ *     .data([
+ *       { label: 'Jan', value: 100 },
+ *       { label: 'Feb', value: 150 },
+ *       { label: 'Mar', value: 200 }
+ *     ])
+ *     .title('Monthly Sales')
+ *     .showLegend(true)
+ *     .render('#app');
+ */
+export class AreaChartSmooth {
+    state: AreaChartSmoothState;
+    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: AreaChartSmoothOptions = {}) {
+        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: AreaChartSmoothDataPoint[]): 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-areachartsmooth-title';
+            titleEl.textContent = title;
+            wrapper.appendChild(titleEl);
+        }
+
+        // Subtitle
+        if (subtitle) {
+            const subtitleEl = document.createElement('p');
+            subtitleEl.className = 'jux-areachartsmooth-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-areachartsmooth-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-areachartsmooth-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: AreaChartSmoothDataPoint[],
+        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, showDataLabels, animate, animationDuration } = this.state;
+
+        const yScale = chartHeight / maxValue;
+        // Change spacing calculation to use data.length - 1 for even distribution
+        const spacing = chartWidth / (data.length - 1);
+
+        // 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);
+
+            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);
+            }
+
+            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);
+
+                    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);
+
+                    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);
+
+            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);
+            }
+        }
+
+        // Generate smooth path
+        const pathData = this._generateSmoothPath(data, padding, chartWidth, chartHeight, maxValue, yScale, spacing, isReverse, false);
+        const color = colors[0];
+
+        // Create area path with gradient fill
+        this._renderAreaPath(svg, pathData, color, isReverse ? padding.top : height - padding.bottom, animate);
+
+        // Add data point circles and labels
+        data.forEach((point, index) => {
+            // Changed calculation to place points at edges
+            const x = padding.left + (index * spacing);
+            const pointY = point.value * yScale;
+            const y = isReverse ? padding.top + pointY : height - padding.bottom - pointY;
+
+            // Data point circle
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('cx', x.toString());
+            circle.setAttribute('cy', y.toString());
+            circle.setAttribute('r', '4');
+            circle.setAttribute('fill', 'white');
+            circle.setAttribute('stroke', color);
+            circle.setAttribute('stroke-width', '2');
+
+            if (animate) {
+                circle.classList.add('jux-label-animated');
+                circle.style.animationDelay = `${animationDuration}ms`;
+            }
+
+            svg.appendChild(circle);
+
+            // X-axis label
+            if (showTicksX && showScaleX) {
+                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                label.setAttribute('x', x.toString());
+                label.setAttribute('y', (height - padding.bottom + 20).toString());
+                label.setAttribute('text-anchor', 'middle');
+                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);
+            }
+
+            // Value labels
+            if (showDataLabels) {
+                const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                valueLabel.setAttribute('x', x.toString());
+                valueLabel.setAttribute('y', (y - 10).toString());
+                valueLabel.setAttribute('text-anchor', 'middle');
+                valueLabel.setAttribute('fill', '#374151');
+                valueLabel.setAttribute('font-size', '11');
+                valueLabel.setAttribute('font-weight', '600');
+                valueLabel.setAttribute('font-family', 'inherit');
+                valueLabel.textContent = point.value.toString();
+
+                if (animate) {
+                    valueLabel.classList.add('jux-label-animated');
+                    valueLabel.style.animationDelay = `${animationDuration}ms`;
+                }
+
+                svg.appendChild(valueLabel);
+            }
+        });
+    }
+
+    private _renderHorizontalBars(
+        svg: SVGSVGElement,
+        data: AreaChartSmoothDataPoint[],
+        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, showDataLabels, animate, animationDuration } = this.state;
+
+        const xScale = chartWidth / maxValue;
+        // Change spacing calculation to use data.length - 1 for even distribution
+        const spacing = chartHeight / (data.length - 1);
+
+        // X-axis (value axis)
+        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);
+
+            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);
+            }
+
+            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);
+
+                    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);
+
+                    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 (category 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);
+
+            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);
+            }
+        }
+
+        // Generate smooth path for horizontal orientation
+        const pathData = this._generateSmoothPath(data, padding, chartWidth, chartHeight, maxValue, xScale, spacing, isReverse, true);
+        const color = colors[0];
+
+        // Create area path
+        this._renderAreaPath(svg, pathData, color, isReverse ? width - padding.right : padding.left, animate, true);
+
+        // Add data point circles and labels
+        data.forEach((point, index) => {
+            // Changed calculation to place points at edges
+            const y = padding.top + (index * spacing);
+            const pointX = point.value * xScale;
+            const x = isReverse ? width - padding.right - pointX : padding.left + pointX;
+
+            // Data point circle
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('cx', x.toString());
+            circle.setAttribute('cy', y.toString());
+            circle.setAttribute('r', '4');
+            circle.setAttribute('fill', 'white');
+            circle.setAttribute('stroke', color);
+            circle.setAttribute('stroke-width', '2');
+
+            if (animate) {
+                circle.classList.add('jux-label-animated');
+                circle.style.animationDelay = `${animationDuration}ms`;
+            }
+
+            svg.appendChild(circle);
+
+            // 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 + 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);
+            }
+
+            // Value labels
+            if (showDataLabels) {
+                const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                valueLabel.setAttribute('x', (x + 10).toString());
+                valueLabel.setAttribute('y', (y + 4).toString());
+                valueLabel.setAttribute('text-anchor', 'start');
+                valueLabel.setAttribute('fill', '#374151');
+                valueLabel.setAttribute('font-size', '11');
+                valueLabel.setAttribute('font-weight', '600');
+                valueLabel.setAttribute('font-family', 'inherit');
+                valueLabel.textContent = point.value.toString();
+
+                if (animate) {
+                    valueLabel.classList.add('jux-label-animated');
+                    valueLabel.style.animationDelay = `${animationDuration}ms`;
+                }
+
+                svg.appendChild(valueLabel);
+            }
+        });
+    }
+
+    private _generateSmoothPath(
+        data: AreaChartSmoothDataPoint[],
+        padding: { top: number, right: number, bottom: number, left: number },
+        chartWidth: number,
+        chartHeight: number,
+        maxValue: number,
+        scale: number,
+        spacing: number,
+        isReverse: boolean,
+        isHorizontal: boolean
+    ): string {
+        if (data.length === 0) return '';
+
+        const points: { x: number, y: number }[] = data.map((point, index) => {
+            if (isHorizontal) {
+                // Changed to place points at edges
+                const y = padding.top + (index * spacing);
+                const pointX = point.value * scale;
+                const x = isReverse
+                    ? padding.right + chartWidth - pointX
+                    : padding.left + pointX;
+                return { x, y };
+            } else {
+                // Changed to place points at edges
+                const x = padding.left + (index * spacing);
+                const pointY = point.value * scale;
+                const y = isReverse
+                    ? padding.top + pointY
+                    : padding.top + chartHeight - pointY;
+                return { x, y };
+            }
+        });
+
+        // Start path at first data point
+        let path = `M ${points[0].x},${points[0].y}`;
+
+        // Generate smooth curve using cubic bezier
+        for (let i = 0; i < points.length - 1; i++) {
+            const current = points[i];
+            const next = points[i + 1];
+            const prev = i > 0 ? points[i - 1] : current;
+            const afterNext = i < points.length - 2 ? points[i + 2] : next;
+
+            // Calculate control points for smooth curve
+            const tension = 0.3;
+            
+            if (isHorizontal) {
+                const cp1x = current.x + (next.x - prev.x) * tension;
+                const cp1y = current.y;
+                const cp2x = next.x - (afterNext.x - current.x) * tension;
+                const cp2y = next.y;
+                path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
+            } else {
+                const cp1x = current.x;
+                const cp1y = current.y + (next.y - prev.y) * tension;
+                const cp2x = next.x;
+                const cp2y = next.y - (afterNext.y - current.y) * tension;
+                path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
+            }
+        }
+
+        return path;
+    }
+
+    private _renderAreaPath(
+        svg: SVGSVGElement,
+        pathData: string,
+        color: string,
+        baseline: number,
+        animate: boolean,
+        isHorizontal: boolean = false
+    ): void {
+        const { styleMode, animationDuration, width, height } = this.state;
+
+        // Extract first and last points from the path
+        const pathParts = pathData.split(/[MC]/);
+        const firstPoint = pathParts[1].trim().split(',');
+        const lastMatch = pathData.match(/(\d+\.?\d*),(\d+\.?\d*)(?!.*\d)/);
+        const lastPoint = lastMatch ? [lastMatch[1], lastMatch[2]] : firstPoint;
+
+        // Create closed area path - connect last point to baseline, then back to first point at baseline
+        let areaPath = pathData;
+        if (isHorizontal) {
+            // For horizontal: go down to baseline, then back to first point at baseline
+            areaPath += ` L ${baseline},${lastPoint[1]} L ${baseline},${firstPoint[1]} Z`;
+        } else {
+            // For vertical: go down to baseline, then back to first point at baseline
+            areaPath += ` L ${lastPoint[0]},${baseline} L ${firstPoint[0]},${baseline} Z`;
+        }
+
+        // Create area element
+        const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        area.setAttribute('d', areaPath);
+
+        // Apply style modes
+        if (styleMode === 'gradient') {
+            const gradientId = `area-gradient-${this._id}`;
+            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', '0.4');
+
+            const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+            stop2.setAttribute('offset', '100%');
+            stop2.setAttribute('stop-color', color);
+            stop2.setAttribute('stop-opacity', '0.05');
+
+            gradient.appendChild(stop1);
+            gradient.appendChild(stop2);
+            svg.appendChild(gradient);
+
+            area.setAttribute('fill', `url(#${gradientId})`);
+        } else if (styleMode === 'glow') {
+            area.setAttribute('fill', color);
+            area.setAttribute('fill-opacity', '0.3');
+            
+            const filterId = `glow-area-${this._id}`;
+            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', '6');
+            filter.appendChild(feGaussianBlur);
+            defs.appendChild(filter);
+
+            area.setAttribute('filter', `url(#${filterId})`);
+        } else if (styleMode === 'glass') {
+            area.setAttribute('fill', color);
+            area.setAttribute('fill-opacity', '0.15');
+        } else {
+            area.setAttribute('fill', color);
+            area.setAttribute('fill-opacity', '0.2');
+        }
+
+        area.setAttribute('stroke', 'none');
+
+        if (animate) {
+            area.style.opacity = '0';
+            area.style.animation = `fadeIn ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards`;
+        }
+
+        svg.appendChild(area);
+
+        // Create stroke line on top (just the curve)
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        line.setAttribute('d', pathData);
+        line.setAttribute('fill', 'none');
+        line.setAttribute('stroke', color);
+        line.setAttribute('stroke-width', '3');
+        line.setAttribute('stroke-linecap', 'round');
+        line.setAttribute('stroke-linejoin', 'round');
+
+        if (animate) {
+            const length = (line as any).getTotalLength?.() || 1000;
+            line.style.strokeDasharray = length.toString();
+            line.style.strokeDashoffset = length.toString();
+            line.style.animation = `drawLine ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards`;
+
+            // Add draw animation
+            const styleId = `draw-line-animation-${this._id}`;
+            if (!document.getElementById(styleId)) {
+                const style = document.createElement('style');
+                style.id = styleId;
+                style.textContent = `
+                    @keyframes drawLine {
+                        to {
+                            stroke-dashoffset: 0;
+                        }
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+        }
+
+        svg.appendChild(line);
+    }
+
+    private _renderBar(
+        svg: SVGSVGElement,
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        color: string,
+        index: number,
+        point: AreaChartSmoothDataPoint,
+        labelPosition: 'top' | 'bottom' | 'left' | 'right',
+        isHorizontal: boolean = false
+    ): void {
+        // This method is no longer used for smooth area charts
+        // Keeping it for backward compatibility
+    }
+
+    /* -------------------------
+     * Legend and Data Table
+     * ------------------------- */
+
+    private _createLegend(): HTMLElement {
+        const { data, colors, legendOrientation } = this.state;
+
+        const legend = document.createElement('div');
+        legend.className = 'jux-areachartsmooth-legend';
+
+        data.forEach((point, index) => {
+            const color = point.color || colors[index % colors.length];
+
+            const item = document.createElement('div');
+            item.className = 'jux-areachartsmooth-legend-item';
+
+            const swatch = document.createElement('div');
+            swatch.className = 'jux-areachartsmooth-legend-swatch';
+            swatch.style.background = color;
+
+            const label = document.createElement('span');
+            label.className = 'jux-areachartsmooth-legend-label';
+            label.textContent = point.label;
+
+            item.appendChild(swatch);
+            item.appendChild(label);
+            legend.appendChild(item);
+        });
+
+        return legend;
+    }
+
+    private _createDataTable(): HTMLElement {
+        const { data, xAxisLabel, yAxisLabel } = this.state;
+
+        const table = document.createElement('table');
+        table.className = 'jux-areachartsmooth-table';
+
+        const thead = document.createElement('thead');
+        const headerRow = document.createElement('tr');
+
+        const columnHeaders = [
+            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-areachartsmooth-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-areachartsmooth-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-areachartsmooth.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-areachartsmooth {
+  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-areachartsmooth-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.jux-areachartsmooth-subtitle {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-family: inherit;
+}
+
+.jux-areachartsmooth-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+  justify-content: center;
+}
+
+.jux-areachartsmooth-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.jux-areachartsmooth-legend-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.jux-areachartsmooth-legend-label {
+  font-size: 0.875rem;
+  color: #374151;
+  font-family: inherit;
+}
+
+.jux-areachartsmooth-table {
+  width: 100%;
+  margin-top: 1rem;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  font-family: inherit;
+  
+}
+
+.jux-areachartsmooth-table thead th {
+  text-align: left;
+  padding: 0.5rem;
+  border-bottom: 2px solid #e5e7eb;
+  font-weight: 600;
+  text-align: center;
+}
+
+.jux-areachartsmooth-table tbody td {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f3f4f6;
+  text-align: center;
+}
+
+.jux-areachartsmooth-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(`AreaChartSmooth: 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-areachartsmooth';
+
+        // 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 areachartsmooth(id: string, options: AreaChartSmoothOptions = {}): AreaChartSmooth {
+    return new AreaChartSmooth(id, options);
+}