gojongwon-circular-progress-bar/dist/CircularProgressBar.d.ts

A lightweight, customizable circular progress bar component for web applications

/**
 * 색상 타입 정의
 */
type ColorValue = string | ((progress: number) => string);
/**
 * 원형 프로그레스 바의 설정 옵션 인터페이스
 */
interface CircularProgressBarOptions {
    value: number;
    maxValue: number;
    size?: number;
    responsive?: boolean;
    gaugeWidth?: number;
    gaugeColor?: ColorValue;
    gaugeType?: "round" | "flat";
    trailWidth?: number;
    trailColor?: ColorValue;
    textColor?: string;
    text?: string;
    textSize?: number;
    textFont?: string;
    animate?: boolean;
    duration?: number;
    className?: string;
    gaugeClassName?: string;
    trailClassName?: string;
    textClassName?: string;
    disableInlineStyles?: boolean;
}
/**
 * 원형 프로그레스 바 클래스
 * SVG를 사용하여 원형 프로그레스 바를 생성하고 관리합니다.
 */
export declare class CircularProgressBar {
    private container;
    private options;
    private svg;
    private gauge;
    private trail;
    private text;
    private resizeObserver?;
    private currentSize;
    /**
     * CircularProgressBar 생성자
     * @param container - 프로그레스 바를 렌더링할 HTML 요소
     * @param options - 프로그레스 바 설정 옵션
     */
    constructor(container: HTMLElement, options: CircularProgressBarOptions);
    /**
     * 색상 값을 해석합니다.
     * 문자열이면 그대로 반환하고, 함수면 현재 진행률을 기반으로 색상을 계산합니다.
     * @param colorValue - 색상 값 (문자열 또는 함수)
     * @param progress - 현재 진행률 (0~1)
     * @returns 해석된 색상 문자열
     */
    private resolveColor;
    /**
     * SVG 요소와 원형 프로그레스 바를 초기화합니다.
     * 중심은 같고 너비의 중앙만 같도록 반지름을 조정합니다.
     */
    private initialize;
    /**
     * 현재 값에 따라 프로그레스 바를 렌더링합니다.
     * stroke-dashoffset을 조정하여 진행률을 표시합니다.
     */
    private render;
    /**
     * 프로그레스 바의 값을 설정합니다.
     * @param value - 새로운 값 (0 ~ maxValue 사이)
     */
    setValue(value: number): void;
    /**
     * 현재 값을 반환합니다.
     * @returns 현재 값
     */
    getValue(): number;
    /**
     * 컨테이너의 크기를 가져옵니다.
     * @returns 컨테이너의 최소 크기 (가로, 세로 중 작은 값)
     */
    private getContainerSize;
    /**
     * ResizeObserver를 설정하여 컨테이너 크기 변화를 감지합니다.
     */
    private setupResizeObserver;
    /**
     * SVG 크기를 조정합니다.
     * @param newSize - 새로운 크기
     */
    private resize;
    /**
     * 인스턴스를 정리합니다.
     * ResizeObserver를 해제합니다.
     */
    destroy(): void;
    /**
     * 게이지 색상을 동적으로 업데이트합니다.
     * @param color - 새로운 색상 (문자열 또는 함수)
     */
    setGaugeColor(color: ColorValue): void;
    /**
     * 트레일 색상을 동적으로 업데이트합니다.
     * @param color - 새로운 색상 (문자열 또는 함수)
     */
    setTrailColor(color: ColorValue): void;
    /**
     * 현재 게이지 색상을 반환합니다.
     * @returns 현재 게이지 색상 설정
     */
    getGaugeColor(): ColorValue;
    /**
     * 현재 트레일 색상을 반환합니다.
     * @returns 현재 트레일 색상 설정
     */
    getTrailColor(): ColorValue;
    /**
     * SVG 요소에 CSS 클래스를 설정합니다.
     * @param className - CSS 클래스명
     */
    setClassName(className: string): void;
    /**
     * 게이지 원에 CSS 클래스를 설정합니다.
     * @param className - CSS 클래스명
     */
    setGaugeClassName(className: string): void;
    /**
     * 트레일 원에 CSS 클래스를 설정합니다.
     * @param className - CSS 클래스명
     */
    setTrailClassName(className: string): void;
    /**
     * 텍스트에 CSS 클래스를 설정합니다.
     * @param className - CSS 클래스명
     */
    setTextClassName(className: string): void;
    /**
     * 인라인 스타일 활성화/비활성화를 설정합니다.
     * @param disable - true면 인라인 스타일 비활성화, false면 활성화
     */
    setDisableInlineStyles(disable: boolean): void;
    /**
     * 현재 CSS 클래스 설정을 반환합니다.
     * @returns CSS 클래스 설정 객체
     */
    getClassNames(): {
        className: string;
        gaugeClassName: string;
        trailClassName: string;
        textClassName: string;
    };
    /**
     * SVG 요소를 반환합니다.
     * 외부에서 직접 스타일링할 때 사용합니다.
     * @returns SVG 요소
     */
    getSVGElement(): SVGElement;
    /**
     * 게이지 원 요소를 반환합니다.
     * @returns 게이지 원 요소
     */
    getGaugeElement(): SVGPathElement;
    /**
     * 트레일 원 요소를 반환합니다.
     * @returns 트레일 원 요소
     */
    getTrailElement(): SVGPathElement;
    /**
     * 텍스트 요소를 반환합니다.
     * @returns 텍스트 요소
     */
    getTextElement(): SVGTextElement;
}
export {};