juxscript 1.0.3 → 1.0.5

package/lib/components/barchart.ts

@@ -0,0 +1,1248 @@
+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 BarChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+/**
+ * Bar chart options
+ */
+export interface BarChartOptions {
+    data?: BarChartDataPoint[];
+    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' | 'outline' | 'dashed' | 'glow' | 'glass';
+    borderRadius?: number;
+}
+
+/**
+ * Bar chart state
+ */
+type BarChartState = {
+    data: BarChartDataPoint[];
+    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' | 'outline' | 'dashed' | 'glow' | 'glass';
+    borderRadius: number;
+};
+
+/**
+ * Bar chart component - Simple SVG-based bar chart
+ * 
+ * Usage:
+ *   jux.barchart('sales-chart')
+ *     .data([
+ *       { label: 'Jan', value: 100 },
+ *       { label: 'Feb', value: 150 },
+ *       { label: 'Mar', value: 200 }
+ *     ])
+ *     .title('Monthly Sales')
+ *     .showLegend(true)
+ *     .render('#app');
+ */
+export class BarChart {
+    state: BarChartState;
+    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: BarChartOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        const defaultColors = [
+            '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+            '#ec4899', '#06b6d4', '#f97316', '#84cc16', '#6366f1'
+        ];
+
+        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: BarChartDataPoint[]): 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' | 'outline' | 'dashed' | '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-barchart-title';
+            titleEl.textContent = title;
+            wrapper.appendChild(titleEl);
+        }
+
+        // Subtitle
+        if (subtitle) {
+            const subtitleEl = document.createElement('p');
+            subtitleEl.className = 'jux-barchart-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-barchart-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-barchart-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: BarChartDataPoint[],
+        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.2;
+        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: BarChartDataPoint[],
+        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)
+        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 (now the value 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);
+            }
+
+            // 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
+                    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)
+        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 (now the category 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);
+            }
+        }
+
+        // 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: BarChartDataPoint,
+        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 === 'outline') {
+            rect.setAttribute('fill', 'transparent');
+            rect.setAttribute('stroke', color);
+            rect.setAttribute('stroke-width', '3');
+        } else if (styleMode === 'dashed') {
+            rect.setAttribute('fill', this._lightenColor(color, 60));
+            rect.setAttribute('stroke', color);
+            rect.setAttribute('stroke-width', '2');
+            rect.setAttribute('stroke-dasharray', '8,4');
+        } 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', '2');
+            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-barchart-legend';
+
+        data.forEach((point, index) => {
+            const color = point.color || colors[index % colors.length];
+
+            const item = document.createElement('div');
+            item.className = 'jux-barchart-legend-item';
+
+            const swatch = document.createElement('div');
+            swatch.className = 'jux-barchart-legend-swatch';
+            swatch.style.background = color;
+
+            const label = document.createElement('span');
+            label.className = 'jux-barchart-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-barchart-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
+        this.state.colors = theme.colors;
+
+        // Inject base styles (once)
+        const baseStyleId = 'jux-barchart-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-barchart-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-barchart.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-barchart {
+  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-barchart-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.jux-barchart-subtitle {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-family: inherit;
+}
+
+.jux-barchart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+  justify-content: center;
+}
+
+.jux-barchart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.jux-barchart-legend-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.jux-barchart-legend-label {
+  font-size: 0.875rem;
+  color: #374151;
+  font-family: inherit;
+}
+
+.jux-barchart-table {
+  width: 100%;
+  margin-top: 1rem;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  font-family: inherit;
+}
+
+.jux-barchart-table thead th {
+  text-align: left;
+  padding: 0.5rem;
+  border-bottom: 2px solid #e5e7eb;
+  font-weight: 600;
+}
+
+.jux-barchart-table tbody td {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.jux-barchart-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(`BarChart: 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-barchart';
+
+        // 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 barchart(id: string, options: BarChartOptions = {}): BarChart {
+    return new BarChart(id, options);
+}