juxscript 1.0.20 → 1.0.21

package/lib/components/doughnutchart.ts

@@ -1,1259 +0,0 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
-import {
-    ChartDataPoint,
-    DoughnutChartOptions as DoughnutChartOptionsBase,
-    DoughnutChartState as DoughnutChartStateBase,
-    ChartTheme,
-    ChartStyleMode,
-    LegendOrientation,
-    ChartPropertyMapping,
-    ChartStateObject
-} from './chart-types.js';
-import {
-    lightenColor,
-    getThemeConfig,
-    createLegend,
-    createDataTable,
-    applyThemeStyles
-} from './chart-utils.js';
-import {
-    googleTheme,
-    seriesaTheme,
-    hrTheme,
-    figmaTheme,
-    notionTheme,
-    chalkTheme,
-    mintTheme
-} from '../themes/charts.js';
-
-/**
- * Bar chart data point
- */
-export interface DoughnutChartDataPoint {
-    label: string;
-    value: number;
-    color?: string;
-}
-
-/**
- * Bar chart options
- */
-export interface DoughnutChartOptions {
-    data?: DoughnutChartDataPoint[];
-    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 DoughnutChartState = {
-    data: DoughnutChartDataPoint[];
-    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.doughnutchart('sales-chart')
- *     .data([
- *       { label: 'Jan', value: 100 },
- *       { label: 'Feb', value: 150 },
- *       { label: 'Mar', value: 200 }
- *     ])
- *     .title('Monthly Sales')
- *     .showLegend(true)
- *     .render('#app');
- */
-export class DoughnutChart {
-    state: DoughnutChartState;
-    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: DoughnutChartOptions = {}) {
-        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: DoughnutChartDataPoint[]): 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-doughnutchart-title';
-            titleEl.textContent = title;
-            wrapper.appendChild(titleEl);
-        }
-
-        // Subtitle
-        if (subtitle) {
-            const subtitleEl = document.createElement('p');
-            subtitleEl.className = 'jux-doughnutchart-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,
-            styleMode, showDataLabels, animate, animationDuration
-        } = 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-doughnutchart-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-doughnutchart-svg');
-
-        // Add animation styles to SVG
-        if (animate) {
-            const animationId = `slice-scale-${this._id}`;
-            const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-
-            style.textContent = `
-                @keyframes ${animationId} {
-                    from {
-                        transform: scale(0);
-                        opacity: 0;
-                    }
-                    to {
-                        transform: scale(1);
-                        opacity: 1;
-                    }
-                }
-                .jux-slice-animated {
-                    transform-origin: ${width / 2}px ${height / 2}px;
-                    animation: ${animationId} ${animationDuration}ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-                    opacity: 0;
-                }
-                .jux-label-animated {
-                    opacity: 0;
-                    animation: fadeIn 400ms ease-out forwards;
-                }
-                @keyframes fadeIn {
-                    from { opacity: 0; transform: scale(0.8); }
-                    to { opacity: 1; transform: scale(1); }
-                }
-            `;
-            svg.appendChild(style);
-        }
-
-        // Calculate dimensions - adjust margin based on whether labels are shown
-        const centerX = width / 2;
-        const centerY = height / 2;
-        const margin = showDataLabels ? 100 : 40; // Less margin when no labels
-        const radius = Math.min(width, height) / 2 - margin;
-        const innerRadius = radius * 0.6; // Inner radius for doughnut hole
-
-        // Calculate total value
-        const total = data.reduce((sum, point) => sum + point.value, 0);
-
-        // Render slices
-        this._renderDoughnutSlices(svg, data, colors, centerX, centerY, radius, innerRadius, total);
-
-        return svg;
-    }
-
-    private _renderDoughnutSlices(
-        svg: SVGSVGElement,
-        data: DoughnutChartDataPoint[],
-        colors: string[],
-        centerX: number,
-        centerY: number,
-        radius: number,
-        innerRadius: number,
-        total: number
-    ): void {
-        const { styleMode, showDataLabels, animate } = this.state;
-
-        let currentAngle = -90; // Start at top (12 o'clock)
-
-        data.forEach((point, index) => {
-            const color = point.color || colors[index % colors.length];
-            const percentage = (point.value / total) * 100;
-            const sliceAngle = (point.value / total) * 360;
-
-            // Create slice path
-            const path = this._createDoughnutSlice(
-                centerX,
-                centerY,
-                radius,
-                innerRadius,
-                currentAngle,
-                currentAngle + sliceAngle
-            );
-
-            this._renderSlice(
-                svg,
-                path,
-                color,
-                index,
-                point,
-                centerX,
-                centerY,
-                radius,
-                innerRadius,
-                currentAngle,
-                sliceAngle,
-                percentage
-            );
-
-            currentAngle += sliceAngle;
-        });
-
-        // Add center circle for clean doughnut hole
-        const centerCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        centerCircle.setAttribute('cx', centerX.toString());
-        centerCircle.setAttribute('cy', centerY.toString());
-        centerCircle.setAttribute('r', innerRadius.toString());
-        centerCircle.setAttribute('fill', 'white');
-        svg.appendChild(centerCircle);
-    }
-
-    private _createDoughnutSlice(
-        centerX: number,
-        centerY: number,
-        outerRadius: number,
-        innerRadius: number,
-        startAngle: number,
-        endAngle: number
-    ): string {
-        // Convert angles to radians
-        const startRad = (startAngle * Math.PI) / 180;
-        const endRad = (endAngle * Math.PI) / 180;
-
-        // Calculate outer arc points
-        const x1 = centerX + outerRadius * Math.cos(startRad);
-        const y1 = centerY + outerRadius * Math.sin(startRad);
-        const x2 = centerX + outerRadius * Math.cos(endRad);
-        const y2 = centerY + outerRadius * Math.sin(endRad);
-
-        // Calculate inner arc points
-        const x3 = centerX + innerRadius * Math.cos(endRad);
-        const y3 = centerY + innerRadius * Math.sin(endRad);
-        const x4 = centerX + innerRadius * Math.cos(startRad);
-        const y4 = centerY + innerRadius * Math.sin(startRad);
-
-        // Determine if we need a large arc (> 180 degrees)
-        const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
-
-        // Build the path
-        const path = [
-            `M ${x1} ${y1}`, // Move to start of outer arc
-            `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x2} ${y2}`, // Outer arc
-            `L ${x3} ${y3}`, // Line to start of inner arc
-            `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4}`, // Inner arc (reverse)
-            'Z' // Close path
-        ].join(' ');
-
-        return path;
-    }
-
-    private _renderSlice(
-        svg: SVGSVGElement,
-        pathData: string,
-        color: string,
-        index: number,
-        point: DoughnutChartDataPoint,
-        centerX: number,
-        centerY: number,
-        radius: number,
-        innerRadius: number,
-        startAngle: number,
-        sliceAngle: number,
-        percentage: number
-    ): void {
-        const { styleMode, showDataLabels, animate, animationDuration } = this.state;
-
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', pathData);
-
-        if (animate) {
-            path.classList.add('jux-slice-animated');
-            path.style.animationDelay = `${index * 150}ms`;
-        }
-
-        // Apply style modes
-        if (styleMode === 'gradient') {
-            const gradientId = `slice-gradient-${this._id}-${index}`;
-            const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
-            gradient.setAttribute('id', gradientId);
-
-            const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
-            stop1.setAttribute('offset', '0%');
-            stop1.setAttribute('stop-color', this._lightenColor(color, 30));
-
-            const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
-            stop2.setAttribute('offset', '100%');
-            stop2.setAttribute('stop-color', color);
-
-            gradient.appendChild(stop1);
-            gradient.appendChild(stop2);
-            svg.appendChild(gradient);
-
-            path.setAttribute('fill', `url(#${gradientId})`);
-        } else if (styleMode === 'outline') {
-            path.setAttribute('fill', 'transparent');
-            path.setAttribute('stroke', color);
-            path.setAttribute('stroke-width', '3');
-        } else if (styleMode === 'dashed') {
-            path.setAttribute('fill', this._lightenColor(color, 60));
-            path.setAttribute('stroke', color);
-            path.setAttribute('stroke-width', '2');
-            path.setAttribute('stroke-dasharray', '8,4');
-        } else if (styleMode === 'glow') {
-            path.setAttribute('fill', color);
-
-            const filterId = `glow-slice-${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');
-            filter.appendChild(feGaussianBlur);
-            defs.appendChild(filter);
-
-            path.setAttribute('filter', `url(#${filterId})`);
-        } else if (styleMode === 'glass') {
-            path.setAttribute('fill', color);
-            path.setAttribute('fill-opacity', '0.7');
-            path.setAttribute('stroke', color);
-            path.setAttribute('stroke-width', '2');
-            path.setAttribute('stroke-opacity', '0.9');
-        } else {
-            path.setAttribute('fill', color);
-        }
-
-        // Add stroke for separation
-        if (styleMode !== 'outline') {
-            path.setAttribute('stroke', 'white');
-            path.setAttribute('stroke-width', '2');
-        }
-
-        svg.appendChild(path);
-
-        // Add external labels with percentage bubbles
-        if (showDataLabels) {
-            const middleAngle = startAngle + (sliceAngle / 2);
-            const middleRad = (middleAngle * Math.PI) / 180;
-
-            // Line start (from outer edge)
-            const lineStartRadius = radius + 5;
-            const lineStartX = centerX + lineStartRadius * Math.cos(middleRad);
-            const lineStartY = centerY + lineStartRadius * Math.sin(middleRad);
-
-            // Bubble position (along the line)
-            const bubbleRadius = radius + 45;
-            const bubbleX = centerX + bubbleRadius * Math.cos(middleRad);
-            const bubbleY = centerY + bubbleRadius * Math.sin(middleRad);
-
-            // Label position (beyond the bubble)
-            const labelDistance = radius + 80;
-            const externalLabelX = centerX + labelDistance * Math.cos(middleRad);
-            const externalLabelY = centerY + labelDistance * Math.sin(middleRad);
-
-            const lineGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-
-            if (animate) {
-                lineGroup.classList.add('jux-label-animated');
-                lineGroup.style.animationDelay = `${index * 150 + animationDuration + 100}ms`;
-            }
-
-            // Line from slice to bubble
-            const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line1.setAttribute('x1', lineStartX.toString());
-            line1.setAttribute('y1', lineStartY.toString());
-            line1.setAttribute('x2', bubbleX.toString());
-            line1.setAttribute('y2', bubbleY.toString());
-            line1.setAttribute('stroke', color);
-            line1.setAttribute('stroke-width', '2');
-            line1.setAttribute('opacity', '0.8');
-            lineGroup.appendChild(line1);
-
-            // Line from bubble to label
-            const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line2.setAttribute('x1', bubbleX.toString());
-            line2.setAttribute('y1', bubbleY.toString());
-            line2.setAttribute('x2', externalLabelX.toString());
-            line2.setAttribute('y2', externalLabelY.toString());
-            line2.setAttribute('stroke', color);
-            line2.setAttribute('stroke-width', '2');
-            line2.setAttribute('opacity', '0.8');
-            lineGroup.appendChild(line2);
-
-            // Percentage bubble
-            const bubbleGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-
-            // Shadow circle for depth
-            const shadowCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            shadowCircle.setAttribute('cx', bubbleX.toString());
-            shadowCircle.setAttribute('cy', bubbleY.toString());
-            shadowCircle.setAttribute('r', '32');
-            shadowCircle.setAttribute('fill', 'rgba(0, 0, 0, 0.15)');
-            shadowCircle.setAttribute('filter', 'blur(4px)');
-            bubbleGroup.appendChild(shadowCircle);
-
-            // White background circle
-            const whiteBg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            whiteBg.setAttribute('cx', bubbleX.toString());
-            whiteBg.setAttribute('cy', bubbleY.toString());
-            whiteBg.setAttribute('r', '30');
-            whiteBg.setAttribute('fill', 'white');
-            whiteBg.setAttribute('stroke', color);
-            whiteBg.setAttribute('stroke-width', '3');
-            bubbleGroup.appendChild(whiteBg);
-
-            // Percentage label
-            const percentLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            percentLabel.setAttribute('x', bubbleX.toString());
-            percentLabel.setAttribute('y', (bubbleY - 3).toString());
-            percentLabel.setAttribute('text-anchor', 'middle');
-            percentLabel.setAttribute('dominant-baseline', 'middle');
-            percentLabel.setAttribute('fill', color);
-            percentLabel.setAttribute('font-size', '14');
-            percentLabel.setAttribute('font-weight', '800');
-            percentLabel.setAttribute('font-family', 'inherit');
-            percentLabel.textContent = `${percentage.toFixed(1)}%`;
-            bubbleGroup.appendChild(percentLabel);
-
-            // Value label below percentage
-            const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            valueLabel.setAttribute('x', bubbleX.toString());
-            valueLabel.setAttribute('y', (bubbleY + 11).toString());
-            valueLabel.setAttribute('text-anchor', 'middle');
-            valueLabel.setAttribute('dominant-baseline', 'middle');
-            valueLabel.setAttribute('fill', '#6b7280');
-            valueLabel.setAttribute('font-size', '10');
-            valueLabel.setAttribute('font-weight', '600');
-            valueLabel.setAttribute('font-family', 'inherit');
-            valueLabel.textContent = point.value.toString();
-            bubbleGroup.appendChild(valueLabel);
-
-            lineGroup.appendChild(bubbleGroup);
-
-            // Category label at the end
-            const externalLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            externalLabel.setAttribute('x', externalLabelX.toString());
-            externalLabel.setAttribute('y', externalLabelY.toString());
-
-            // Anchor based on which side of the circle
-            const anchor = middleAngle > -90 && middleAngle < 90 ? 'start' : 'end';
-            externalLabel.setAttribute('text-anchor', anchor);
-            externalLabel.setAttribute('dominant-baseline', 'middle');
-            externalLabel.setAttribute('fill', '#374151');
-            externalLabel.setAttribute('font-size', '13');
-            externalLabel.setAttribute('font-weight', '600');
-            externalLabel.setAttribute('font-family', 'inherit');
-            externalLabel.textContent = point.label;
-            lineGroup.appendChild(externalLabel);
-
-            svg.appendChild(lineGroup);
-        }
-
-        // Add hover effect
-        path.style.cursor = 'pointer';
-        path.style.transition = 'transform 0.2s, opacity 0.2s';
-
-        path.addEventListener('mouseenter', () => {
-            path.style.transform = 'scale(1.05)';
-            path.style.opacity = '0.9';
-        });
-
-        path.addEventListener('mouseleave', () => {
-            path.style.transform = 'scale(1)';
-            path.style.opacity = '1';
-        });
-    }
-
-    // Remove the old bar rendering methods
-    private _renderVerticalBars(): void {
-        // Not used for doughnut chart
-    }
-
-    private _renderHorizontalBars(): void {
-        // Not used for doughnut chart
-    }
-
-    private _renderBar(): void {
-        // Not used for doughnut chart
-    }
-
-    /* -------------------------
-     * Reactivity Support
-     * ------------------------- */
-
-    /**
-     * Sync a single property to a state object
-     */
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-            const transformed = transform(val);
-
-            // Map property to correct method
-            switch (property) {
-                case 'data': this.data(transformed); break;
-                case 'title': this.title(transformed); break;
-                case 'subtitle': this.subtitle(transformed); break;
-                case 'width': this.width(transformed); break;
-                case 'height': this.height(transformed); break;
-                case 'theme': this.theme(transformed); break;
-                case 'styleMode': this.styleMode(transformed); break;
-                case 'borderRadius': this.borderRadius(transformed); break;
-                case 'showLegend': this.showLegend(transformed); break;
-                case 'showDataLabels': this.showDataLabels(transformed); break;
-                case 'showDataTable': this.showDataTable(transformed); break;
-                case 'animate': this.animate(transformed); break;
-                case 'animationDuration': this.animationDuration(transformed); break;
-                case 'legendOrientation': this.legendOrientation(transformed); break;
-            }
-        });
-
-        return this;
-    }
-
-    /**
-     * Sync multiple properties from a state object
-     */
-    syncState(stateObject: ChartStateObject, mapping?: ChartPropertyMapping): this {
-        // Default mapping: camelCase state names to method names
-        const defaultMapping: ChartPropertyMapping = {
-            chartType: 'type',           // Not used in doughnut chart, ignored
-            chartTheme: 'theme',
-            chartStyleMode: 'styleMode',
-            borderRadius: 'borderRadius',
-            chartTitle: 'title',
-            chartWidth: 'width',
-            chartHeight: 'height',
-            showLegend: 'showLegend',
-            showDataTable: 'showDataTable',
-            showDataLabels: 'showDataLabels',
-            animate: 'animate',
-            animationDuration: 'animationDuration',
-            legendOrientation: 'legendOrientation',
-            // Note: Doughnut charts don't use these, but we handle them gracefully
-            showTicksX: null,
-            showTicksY: null,
-            chartOrientation: null,
-            chartDirection: null
-        };
-
-        const finalMapping = { ...defaultMapping, ...mapping };
-
-        // Iterate through state object and bind each property
-        Object.entries(stateObject).forEach(([key, stateObj]) => {
-            if (!stateObj || typeof stateObj.subscribe !== 'function') {
-                return;
-            }
-
-            const methodOrFunction = finalMapping[key];
-
-            // Skip null mappings (properties not applicable to this chart type)
-            if (methodOrFunction === null || !methodOrFunction) {
-                return;
-            }
-
-            if (typeof methodOrFunction === 'function') {
-                // Custom function mapping
-                stateObj.subscribe(methodOrFunction);
-            } else {
-                // String mapping to method name
-                const methodName = methodOrFunction as keyof this;
-                const method = this[methodName];
-
-                if (typeof method !== 'function') {
-                    return;
-                }
-
-                stateObj.subscribe((val: any) => {
-                    (method as Function).call(this, val);
-                });
-            }
-        });
-
-        return this;
-    }
-
-    /* -------------------------
-     * Legend and Data Table
-     * ------------------------- */
-
-    private _createLegend(): HTMLElement {
-        const { data, colors, legendOrientation } = this.state;
-
-        const legend = document.createElement('div');
-        legend.className = 'jux-doughnutchart-legend';
-
-        data.forEach((point, index) => {
-            const color = point.color || colors[index % colors.length];
-
-            const item = document.createElement('div');
-            item.className = 'jux-doughnutchart-legend-item';
-
-            const swatch = document.createElement('div');
-            swatch.className = 'jux-doughnutchart-legend-swatch';
-            swatch.style.background = color;
-
-            const label = document.createElement('span');
-            label.className = 'jux-doughnutchart-legend-label';
-            label.textContent = point.label;
-
-            item.appendChild(swatch);
-            item.appendChild(label);
-            legend.appendChild(item);
-        });
-
-        return legend;
-    }
-
-    private _createDataTable(): HTMLElement {
-        const { data, xAxisLabel, yAxisLabel, colors } = this.state;
-
-        // Calculate total for percentages
-        const total = data.reduce((sum, point) => sum + point.value, 0);
-
-        const table = document.createElement('table');
-        table.className = 'jux-doughnutchart-table';
-
-        const thead = document.createElement('thead');
-        const headerRow = document.createElement('tr');
-
-        const columnHeaders = [
-            xAxisLabel || 'Month',
-            yAxisLabel || 'Revenue ($)',
-            'Percentage'
-        ];
-
-        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, index) => {
-            const row = document.createElement('tr');
-            const color = point.color || colors[index % colors.length];
-            const percentage = (point.value / total) * 100;
-
-            // Label cell with color indicator
-            const labelCell = document.createElement('td');
-            labelCell.style.cssText = `
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            `;
-
-            const colorSwatch = document.createElement('div');
-            colorSwatch.style.cssText = `
-                width: 16px;
-                height: 16px;
-                border-radius: 3px;
-                background: ${color};
-                flex-shrink: 0;
-            `;
-            labelCell.appendChild(colorSwatch);
-
-            const labelText = document.createElement('span');
-            labelText.textContent = point.label;
-            labelCell.appendChild(labelText);
-
-            // Value cell
-            const valueCell = document.createElement('td');
-            valueCell.textContent = point.value.toString();
-
-            // Percentage cell with colored border
-            const percentCell = document.createElement('td');
-            const percentBadge = document.createElement('span');
-            percentBadge.textContent = `${percentage.toFixed(1)}%`;
-            percentBadge.style.cssText = `
-                display: inline-block;
-                padding: 4px 12px;
-                border-radius: 12px;
-                border: 2px solid ${color};
-                color: ${color};
-                font-weight: 700;
-                font-size: 13px;
-                background: ${this._lightenColor(color, 90)};
-            `;
-            percentCell.appendChild(percentBadge);
-
-            row.appendChild(labelCell);
-            row.appendChild(valueCell);
-            row.appendChild(percentCell);
-            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 theme = getThemeConfig(themeName as ChartTheme);
-        if (!theme) return;
-
-        // Apply colors
-        this.state.colors = theme.colors;
-
-        applyThemeStyles(themeName as ChartTheme, 'jux-doughnutchart', this._getBaseStyles());
-    }
-
-    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-doughnutchart {
-  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-doughnutchart.flat{
-    box-shadow: none;
-}
-    
-.jux-doughnutchart-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  font-family: inherit;
-}
-
-.jux-doughnutchart-subtitle {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-  font-family: inherit;
-}
-
-.jux-doughnutchart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 1rem;
-  justify-content: center;
-}
-
-.jux-doughnutchart-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.jux-doughnutchart-legend-swatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 2px;
-}
-
-.jux-doughnutchart-legend-label {
-  font-size: 0.875rem;
-  color: #374151;
-  font-family: inherit;
-}
-
-.jux-doughnutchart-table {
-  width: 100%;
-  margin-top: 1.5rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-  font-family: inherit;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.jux-doughnutchart-table thead {
-  background: #f9fafb;
-}
-
-.jux-doughnutchart-table thead th {
-  text-align: center;
-  padding: 12px 16px;
-  border-bottom: 2px solid #e5e7eb;
-  font-weight: 600;
-  color: #374151;
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.jux-doughnutchart-table tbody td {
-  padding: 12px 16px;
-  border-bottom: 1px solid #f3f4f6;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.jux-doughnutchart-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.jux-doughnutchart-table tbody tr:hover {
-  background: #f9fafb;
-}
-
-.jux-doughnutchart-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(`DoughnutChart: 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-doughnutchart';
-
-        // 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 doughnutchart(id: string, options: DoughnutChartOptions = {}): DoughnutChart {
-    return new DoughnutChart(id, options);
-}