juxscript 1.0.57 → 1.0.60

package/lib/components/charts/barchart.ts

@@ -1,421 +0,0 @@
-import { BaseChart, BaseChartState, ChartDataPoint } from './lib/BaseChart.js';
-
-export interface BarChartOptions {
-    data?: ChartDataPoint[];
-    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';
-    chartDirection?: 'normal' | 'reverse';
-    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;
-}
-
-interface BarChartState extends BaseChartState {
-    data: ChartDataPoint[];
-    chartOrientation: 'vertical' | 'horizontal';
-    chartDirection: 'normal' | 'reverse';
-}
-
-export class BarChart extends BaseChart<BarChartState> {
-    constructor(id: string, options: BarChartOptions = {}) {
-        const defaultColors = [
-            '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
-            '#ec4899', '#06b6d4', '#f97316', '#84cc16', '#6366f1'
-        ];
-
-        super(id, {
-            data: options.data ?? [],
-            title: options.title ?? '',
-            subtitle: options.subtitle ?? '',
-            xAxisLabel: options.xAxisLabel ?? '',
-            yAxisLabel: options.yAxisLabel ?? '',
-            showTicksX: options.showTicksX ?? true,
-            showTicksY: options.showTicksY ?? true,
-            showScaleX: options.showScaleX ?? true,
-            showScaleY: options.showScaleY ?? true,
-            scaleXUnit: options.scaleXUnit ?? '',
-            scaleYUnit: options.scaleYUnit ?? '',
-            showLegend: options.showLegend ?? false,
-            legendOrientation: options.legendOrientation ?? 'horizontal',
-            showDataTable: options.showDataTable ?? false,
-            showDataLabels: options.showDataLabels ?? true,
-            animate: options.animate ?? true,
-            animationDuration: options.animationDuration ?? 800,
-            chartOrientation: options.chartOrientation ?? 'vertical',
-            chartDirection: options.chartDirection ?? 'normal',
-            width: options.width ?? 600,
-            height: options.height ?? 400,
-            colors: options.colors ?? defaultColors,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            theme: options.theme,
-            styleMode: options.styleMode ?? 'default',
-            borderRadius: options.borderRadius ?? 4
-        });
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * CHART-SPECIFIC FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    chartOrientation(value: 'vertical' | 'horizontal'): this {
-        this.state.chartOrientation = value;
-        if (this.container) this._updateChart();
-        return this;
-    }
-
-    chartDirection(value: 'normal' | 'reverse'): this {
-        this.state.chartDirection = value;
-        if (this.container) this._updateChart();
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * ABSTRACT METHOD IMPLEMENTATIONS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    protected _getChartClassName(): string {
-        return 'jux-barchart';
-    }
-
-    protected _createSVG(): SVGSVGElement {
-        const { data, width, height, animate } = this.state;
-
-        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');
-
-        if (!data.length) return svg;
-
-        if (animate) this._addAnimationStyles(svg);
-
-        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));
-
-        if (this.state.chartOrientation === 'vertical') {
-            this._renderVerticalBars(svg, padding, chartWidth, chartHeight, maxValue);
-        } else {
-            this._renderHorizontalBars(svg, padding, chartWidth, chartHeight, maxValue);
-        }
-
-        return svg;
-    }
-
-    protected _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;
-}
-.jux-barchart-subtitle {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-.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;
-}
-.jux-barchart-table {
-  width: 100%;
-  margin-top: 1rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-.jux-barchart-table thead th {
-  text-align: center;
-  padding: 0.5rem;
-  border-bottom: 2px solid #e5e7eb;
-  font-weight: 600;
-}
-.jux-barchart-table tbody td {
-  padding: 0.5rem;
-  border-bottom: 1px solid #f3f4f6;
-  text-align: center;
-}
-.jux-barchart-svg {
-  font-family: inherit;
-}
-`;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * PRIVATE RENDERING METHODS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private _addAnimationStyles(svg: SVGSVGElement): void {
-        const { animationDuration, chartOrientation, chartDirection } = this.state;
-        const animationId = `bar-grow-${this._id}`;
-        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-
-        let transformOrigin = chartOrientation === 'horizontal'
-            ? (chartDirection === 'normal' ? 'left' : 'right')
-            : (chartDirection === 'reverse' ? 'top' : 'bottom');
-
-        let scaleAxis = chartOrientation === 'horizontal' ? 'scaleX' : '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);
-    }
-
-    private _renderVerticalBars(svg: SVGSVGElement, padding: any, chartWidth: number, chartHeight: number, maxValue: number): void {
-        const { data, width, height, colors, xAxisLabel, yAxisLabel, showTicksX, showTicksY, showScaleX, showScaleY, scaleYUnit, chartDirection } = this.state;
-        const isReverse = chartDirection === 'reverse';
-        const yScale = chartHeight / maxValue;
-        const barWidth = chartWidth / data.length;
-        const barGap = barWidth * 0.2;
-        const actualBarWidth = barWidth - barGap;
-
-        // Y-axis
-        if (showScaleY) {
-            this._renderAxis(svg, padding.left, padding.top, padding.left, height - padding.bottom);
-            if (yAxisLabel && showTicksY) {
-                this._renderAxisLabel(svg, yAxisLabel, 20, padding.top + chartHeight / 2, -90);
-            }
-            if (showTicksY) {
-                this._renderYTicks(svg, maxValue, yScale, padding, width, height, scaleYUnit, isReverse, chartHeight);
-            }
-        }
-
-        // X-axis
-        if (showScaleX) {
-            const axisY = isReverse ? padding.top : height - padding.bottom;
-            this._renderAxis(svg, padding.left, axisY, width - padding.right, axisY);
-            if (xAxisLabel && showTicksX) {
-                this._renderAxisLabel(svg, xAxisLabel, padding.left + chartWidth / 2, height - 15, 0);
-            }
-        }
-
-        // 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, false);
-
-            // Category label
-            if (showTicksX && showScaleX) {
-                this._renderCategoryLabel(svg, point.label, x + actualBarWidth / 2, height - padding.bottom + 20, index);
-            }
-        });
-    }
-
-    private _renderHorizontalBars(svg: SVGSVGElement, padding: any, chartWidth: number, chartHeight: number, maxValue: number): void {
-        const { data, width, height, colors, showScaleY, showTicksY, chartDirection } = this.state;
-        const isReverse = chartDirection === 'reverse';
-        const xScale = chartWidth / maxValue;
-        const barHeight = chartHeight / data.length;
-        const barGap = barHeight * 0.2;
-        const actualBarHeight = barHeight - barGap;
-
-        // 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, true);
-
-            // Category label
-            if (showTicksY && showScaleY) {
-                this._renderCategoryLabel(svg, point.label, padding.left - 10, y + actualBarHeight / 2 + 4, index);
-            }
-        });
-    }
-
-    private _renderAxis(svg: SVGSVGElement, x1: number, y1: number, x2: number, y2: number): void {
-        const axis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        axis.setAttribute('x1', x1.toString());
-        axis.setAttribute('y1', y1.toString());
-        axis.setAttribute('x2', x2.toString());
-        axis.setAttribute('y2', y2.toString());
-        axis.setAttribute('stroke', '#9ca3af');
-        axis.setAttribute('stroke-width', '2');
-        svg.appendChild(axis);
-    }
-
-    private _renderAxisLabel(svg: SVGSVGElement, text: string, x: number, y: number, rotate: number): void {
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', x.toString());
-        label.setAttribute('y', y.toString());
-        label.setAttribute('text-anchor', 'middle');
-        if (rotate !== 0) label.setAttribute('transform', `rotate(${rotate}, ${x}, ${y})`);
-        label.setAttribute('fill', '#6b7280');
-        label.setAttribute('font-size', '12');
-        label.setAttribute('font-weight', '500');
-        label.textContent = text;
-        svg.appendChild(label);
-    }
-
-    private _renderYTicks(svg: SVGSVGElement, maxValue: number, yScale: number, padding: any, width: number, height: number, unit: string, isReverse: boolean, chartHeight: number): void {
-        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.textContent = Math.round(value).toString() + (unit || '');
-            svg.appendChild(tickLabel);
-        }
-    }
-
-    private _renderCategoryLabel(svg: SVGSVGElement, text: string, x: number, y: number, index: number): void {
-        const { animate } = this.state;
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', x.toString());
-        label.setAttribute('y', y.toString());
-        label.setAttribute('text-anchor', 'middle');
-        label.setAttribute('fill', '#6b7280');
-        label.setAttribute('font-size', '11');
-        label.textContent = text;
-
-        if (animate) {
-            label.classList.add('jux-label-animated');
-            label.style.animationDelay = `${index * 100 + 200}ms`;
-        }
-
-        svg.appendChild(label);
-    }
-
-    private _renderBar(svg: SVGSVGElement, x: number, y: number, width: number, height: number, color: string, index: number, point: ChartDataPoint, isHorizontal: boolean = false): void {
-        const { borderRadius, showDataLabels, animate, animationDuration } = this.state;
-
-        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());
-        rect.setAttribute('fill', color);
-
-        if (animate) {
-            rect.classList.add('jux-bar-animated');
-            rect.style.animationDelay = `${index * 100}ms`;
-        }
-
-        svg.appendChild(rect);
-
-        // Value labels
-        if (showDataLabels) {
-            const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
-            if (isHorizontal) {
-                valueLabel.setAttribute('x', (x + width / 2).toString());
-                valueLabel.setAttribute('y', (y + height / 2 + 4).toString());
-                valueLabel.setAttribute('fill', '#ffffff');
-            } else {
-                valueLabel.setAttribute('x', (x + width / 2).toString());
-                valueLabel.setAttribute('y', (y - 5).toString());
-                valueLabel.setAttribute('fill', '#374151');
-            }
-
-            valueLabel.setAttribute('text-anchor', 'middle');
-            valueLabel.setAttribute('font-weight', '600');
-            valueLabel.setAttribute('font-size', '11');
-            valueLabel.textContent = point.value.toString();
-
-            if (animate) {
-                valueLabel.classList.add('jux-label-animated');
-                valueLabel.style.animationDelay = `${index * 100 + animationDuration - 200}ms`;
-            }
-
-            svg.appendChild(valueLabel);
-        }
-    }
-}
-
-export function barchart(id: string, options: BarChartOptions = {}): BarChart {
-    return new BarChart(id, options);
-}
-
-// Re-export the data point type for convenience
-export type BarChartDataPoint = ChartDataPoint;

package/lib/components/charts/doughnutchart.ts

@@ -1,263 +0,0 @@
-import { BaseChart, BaseChartState, ChartDataPoint } from './lib/BaseChart.js';
-
-export interface DoughnutChartOptions {
-    data?: ChartDataPoint[];
-    title?: string;
-    subtitle?: string;
-    showLegend?: boolean;
-    legendOrientation?: 'horizontal' | 'vertical';
-    showDataTable?: boolean;
-    showDataLabels?: boolean;
-    animate?: boolean;
-    animationDuration?: number;
-    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;
-}
-
-interface DoughnutChartState extends BaseChartState {
-    data: ChartDataPoint[];
-}
-
-export class DoughnutChart extends BaseChart<DoughnutChartState> {
-    constructor(id: string, options: DoughnutChartOptions = {}) {
-        const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899'];
-
-        super(id, {
-            data: options.data ?? [],
-            title: options.title ?? '',
-            subtitle: options.subtitle ?? '',
-            xAxisLabel: '',
-            yAxisLabel: '',
-            showTicksX: false,
-            showTicksY: false,
-            showScaleX: false,
-            showScaleY: false,
-            scaleXUnit: '',
-            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,
-            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
-        });
-    }
-
-    protected _getChartClassName(): string {
-        return 'jux-doughnutchart';
-    }
-
-    protected _createSVG(): SVGSVGElement {
-        const { data, width, height, colors, showDataLabels, animate } = this.state;
-
-        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');
-
-        if (!data.length) return svg;
-
-        if (animate) this._addAnimationStyles(svg);
-
-        const centerX = width / 2;
-        const centerY = height / 2;
-        const margin = showDataLabels ? 100 : 40;
-        const radius = Math.min(width, height) / 2 - margin;
-        const innerRadius = radius * 0.6;
-        const total = data.reduce((sum, point) => sum + point.value, 0);
-
-        this._renderDoughnutSlices(svg, centerX, centerY, radius, innerRadius, total);
-
-        return svg;
-    }
-
-    protected _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-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-.jux-doughnutchart-subtitle {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-.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;
-}
-.jux-doughnutchart-table {
-  width: 100%;
-  margin-top: 1.5rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-  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;
-}
-.jux-doughnutchart-table tbody td {
-  padding: 12px 16px;
-  border-bottom: 1px solid #f3f4f6;
-  text-align: center;
-}
-.jux-doughnutchart-svg {
-  font-family: inherit;
-}
-`;
-    }
-
-    private _addAnimationStyles(svg: SVGSVGElement): void {
-        const { animationDuration } = this.state;
-        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: ${this.state.width / 2}px ${this.state.height / 2}px;
-                animation: ${animationId} ${animationDuration}ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-                opacity: 0;
-            }
-        `;
-        svg.appendChild(style);
-    }
-
-    private _renderDoughnutSlices(svg: SVGSVGElement, centerX: number, centerY: number, radius: number, innerRadius: number, total: number): void {
-        const { data, colors, animate, showDataLabels } = this.state;
-        let currentAngle = -90;
-
-        data.forEach((point, index) => {
-            const color = point.color || colors[index % colors.length];
-            const sliceAngle = (point.value / total) * 360;
-            const path = this._createDoughnutSlice(centerX, centerY, radius, innerRadius, currentAngle, currentAngle + sliceAngle);
-
-            const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            pathEl.setAttribute('d', path);
-            pathEl.setAttribute('fill', color);
-            pathEl.setAttribute('stroke', 'white');
-            pathEl.setAttribute('stroke-width', '2');
-
-            if (animate) {
-                pathEl.classList.add('jux-slice-animated');
-                pathEl.style.animationDelay = `${index * 150}ms`;
-            }
-
-            svg.appendChild(pathEl);
-
-            // ✅ Add data labels if enabled
-            if (showDataLabels) {
-                const midAngle = currentAngle + sliceAngle / 2;
-                const labelRadius = (radius + innerRadius) / 2;
-                const labelX = centerX + labelRadius * Math.cos((midAngle * Math.PI) / 180);
-                const labelY = centerY + labelRadius * Math.sin((midAngle * Math.PI) / 180);
-
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', labelX.toString());
-                label.setAttribute('y', labelY.toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('dominant-baseline', 'middle');
-                label.setAttribute('fill', '#ffffff');
-                label.setAttribute('font-weight', '600');
-                label.setAttribute('font-size', '14');
-                label.textContent = point.value.toString();
-
-                if (animate) {
-                    label.style.opacity = '0';
-                    label.style.animation = `fadeIn 400ms ease-out ${index * 150 + 400}ms forwards`;
-                }
-
-                svg.appendChild(label);
-            }
-
-            currentAngle += sliceAngle;
-        });
-
-        // Center circle
-        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 {
-        const startRad = (startAngle * Math.PI) / 180;
-        const endRad = (endAngle * Math.PI) / 180;
-
-        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);
-        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);
-
-        const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
-
-        return [
-            `M ${x1} ${y1}`,
-            `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
-            `L ${x3} ${y3}`,
-            `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4}`,
-            'Z'
-        ].join(' ');
-    }
-}
-
-export function doughnutchart(id: string, options: DoughnutChartOptions = {}): DoughnutChart {
-    return new DoughnutChart(id, options);
-}