juxscript 1.0.20 → 1.0.21

package/lib/components/charts/barchart.ts

@@ -0,0 +1,421 @@
+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

@@ -0,0 +1,263 @@
+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);
+}