JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 54
  • Score
    100M100P100Q62575F
  • License MIT

Professional trading chart library with advanced customization for trading journal apps

Package Exports

  • chart-0714

Readme

chart-0714 차트 라이브러리

개요

chart-0714는 lightweight-charts의 한계를 극복하기 위해 개발된 WebGL 기반의 고성능 금융 차트 라이브러리입니다. 특히 드로잉 기능과 멀티패널을 지원하며, 트레이딩 저널 애플리케이션에 특화된 기능들을 제공합니다.

주요 특징

  • WebGL 기반 고성능 렌더링: 수십만 개의 캔들 데이터 처리 가능
  • 완전한 드로잉 도구 지원: 트렌드라인, 도형, 텍스트, 마커 등
  • 멀티패널 레이아웃: 가격 차트와 볼륨 차트의 분리된 패널
  • OHLC 스냅 기능: Ctrl 키로 가격에 자동 스냅
  • 플러그인 시스템: 커스텀 인디케이터 확장 가능
  • React 통합 지원: React 컴포넌트 및 훅 제공
  • 완전한 TypeScript 지원: 타입 안정성 보장

설치 및 사용

설치

npm install chart-0714

기본 사용법

import { createChart } from 'chart-0714';

const chart = createChart('container-id', {
  width: 800,
  height: 600,
  theme: 'dark'
});

// 데이터 설정
chart.setData(candleData);

React에서 사용

import { ChartComponent } from 'chart-0714/react';

function TradingChart() {
  return (
    <ChartComponent
      data={candleData}
      options={{
        theme: 'dark',
        showVolume: true
      }}
    />
  );
}

프로젝트 구조

chart-0714/
├── src/
│   ├── core/               # 핵심 차트 로직
│   │   ├── Chart.ts        # 메인 차트 클래스
│   │   ├── ChartPanel.ts   # 패널 기반 클래스
│   │   ├── DataManager.ts  # 데이터 관리
│   │   ├── DrawingManager.ts # 드로잉 도구 관리
│   │   ├── IndicatorManager.ts # 인디케이터 관리
│   │   ├── LineSeriesManager.ts # 라인 시리즈 관리
│   │   ├── MarkerManager.ts # 마커 관리
│   │   ├── PanelManager.ts # 멀티 패널 관리
│   │   ├── WebGLRenderer.ts # WebGL 렌더링 엔진
│   │   ├── chart/          # 차트 컨트롤러들
│   │   └── drawing/        # 드로잉 관련 매니저들
│   ├── indicators/         # 인디케이터 구현
│   ├── panels/            # 패널 타입 (MainChart, Volume)
│   ├── plugins/           # 플러그인 시스템
│   ├── react-integration/ # React 통합
│   ├── renderers/        # 렌더러들 (Candle, Volume, Grid 등)
│   ├── shaders/          # WebGL 쉐이더 (GLSL)
│   ├── types/            # TypeScript 타입 정의
│   ├── ui/               # UI 컴포넌트들
│   └── utils/            # 유틸리티 함수들
├── dist/                 # 빌드 결과물
├── docs/                 # 문서들
├── examples/             # 예제 파일들
└── package.json          # 프로젝트 설정

아키텍처

핵심 컴포넌트

1. Chart 클래스

  • 차트의 메인 진입점
  • 모든 매니저들을 조율하는 중앙 컨트롤러
  • 생명주기 관리 (초기화, 업데이트, 정리)
  • 이벤트 처리 및 UI 컨트롤

2. 매니저 시스템

  • DataManager: 캔들 데이터를 TypedArray로 효율적 관리
  • DrawingManager: 드로잉 도구의 생성, 수정, 삭제 관리
  • IndicatorManager: 기술적 지표의 계산 및 렌더링
  • PanelManager: 멀티 패널 레이아웃 및 리사이징
  • MarkerManager: 차트 위 마커 및 주석 관리
  • LineSeriesManager: 추가적인 라인 차트 관리

3. 렌더링 시스템

  • WebGLRenderer: WebGL 컨텍스트 관리 및 렌더링 파이프라인
  • 전용 쉐이더: GLSL로 작성된 최적화된 쉐이더
    • candle.vert/frag: 캔들스틱 렌더링
    • line.vert/frag: 라인 렌더링
    • volume.vert/frag: 볼륨 바 렌더링
  • 특화 렌더러: 각 차트 요소별 전문 렌더러

드로잉 시스템

DrawingManager 하위 시스템

  • DrawingSnapManager: OHLC 가격에 자동 스냅 기능
  • DrawingMeasureManager: 가격/시간 측정 도구
  • DrawingObjectManager: 드로잉 객체 생명주기 관리
  • DrawingStateManager: 실행 취소/재실행 기능
  • DrawingInteractionManager: 마우스/키보드 상호작용

지원 드로잉 도구

  • 트렌드라인 (TrendLine)
  • 수평선 (HorizontalLine)
  • 수직선 (VerticalLine)
  • 사각형 (Rectangle)
  • 원 (Circle)
  • 텍스트 (Text)
  • 마커 (Marker)
  • 피보나치 리트레이스먼트
  • 측정 도구

멀티패널 시스템

PanelManager 기능

  • 메인 차트 패널과 볼륨 패널의 독립적 관리
  • 패널 간 동기화된 스크롤 및 줌
  • 드래그 가능한 리사이저로 패널 크기 조정
  • 패널별 독립적인 Y축 스케일

패널 타입

  • MainChartPanel: 가격 차트 (캔들스틱, 라인)
  • VolumePanel: 거래량 차트
  • 확장 가능한 커스텀 패널 지원

API 레퍼런스

Chart 생성 옵션

interface ChartOptions {
  width?: number;
  height?: number;
  theme?: 'light' | 'dark' | Theme;
  locale?: string;
  showVolume?: boolean;
  showHeader?: boolean;
  showSettings?: boolean;
  keyboardShortcuts?: boolean;
  snapToOHLC?: boolean;
  plugins?: Plugin[];
}

데이터 구조

interface Candle {
  time: number;  // Unix timestamp
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
}

이벤트 시스템

chart.on('ready', () => {
  console.log('차트 준비 완료');
});

chart.on('dataUpdate', (data) => {
  console.log('데이터 업데이트됨');
});

chart.on('drawingCreated', (drawing) => {
  console.log('드로잉 생성됨', drawing);
});

주요 메서드

// 데이터 관련
chart.setData(candles: Candle[]);
chart.updateData(candles: Candle[]);
chart.appendData(candle: Candle);

// 드로잉 관련
chart.activateDrawingTool('trendline');
chart.removeDrawing(drawingId: string);
chart.clearAllDrawings();

// 인디케이터
chart.addIndicator('MA', { period: 20 });
chart.removeIndicator(indicatorId: string);

// 뷰포트 컨트롤
chart.fitContent();
chart.zoomIn();
chart.zoomOut();
chart.scrollTo(time: number);

테마 시스템

내장 테마

  • Light Theme: 밝은 배경의 기본 테마
  • Dark Theme: 어두운 배경의 테마

커스텀 테마

const customTheme: Theme = {
  background: '#1a1a1a',
  text: '#ffffff',
  grid: '#333333',
  candle: {
    upColor: '#26a69a',
    downColor: '#ef5350',
    wickColor: '#999999'
  },
  volume: {
    upColor: '#26a69a80',
    downColor: '#ef535080'
  },
  drawing: {
    lineColor: '#2196f3',
    fillColor: '#2196f330'
  }
};

플러그인 시스템

MA Cluster 플러그인 예제

import { MAClusterPlugin } from 'chart-0714/plugins';

const chart = createChart('container', {
  plugins: [
    new MAClusterPlugin({
      clusters: [
        { periods: [5, 10, 20], color: '#ff0000' },
        { periods: [50, 100, 200], color: '#0000ff' }
      ]
    })
  ]
});

성능 최적화

WebGL 렌더링 최적화

  • Vertex Buffer Object (VBO) 사용으로 메모리 효율성 극대화
  • Instanced rendering으로 대량 객체 렌더링
  • Frustum culling으로 뷰포트 외부 객체 제외
  • Level of Detail (LOD) 시스템으로 줌 레벨별 최적화

데이터 처리 최적화

  • TypedArray 사용으로 메모리 사용량 감소
  • Binary search로 빠른 데이터 검색
  • 증분 업데이트로 불필요한 재계산 방지
  • Web Worker 활용한 병렬 처리 (계획 중)

빌드 및 개발

개발 환경 설정

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 빌드
npm run build

# 타입 체크
npm run type-check

빌드 설정

  • 빌드 도구: Vite
  • 타겟: ES2022
  • 모듈 시스템: ES Modules
  • 출력 형식: ESM, CJS, TypeScript 정의

문제 해결 가이드

일반적인 문제

1. 차트가 렌더링되지 않음

  • 컨테이너 엘리먼트의 크기 확인
  • WebGL 지원 브라우저 확인
  • 콘솔 에러 메시지 확인

2. 드로잉이 저장되지 않음

  • DrawingStateManager 초기화 확인
  • 로컬 스토리지 권한 확인

3. 성능 문제

  • 데이터 양 확인 (10만 개 이상 시 샘플링 고려)
  • 불필요한 인디케이터 제거
  • Chrome DevTools Performance 탭 활용

로드맵

v2.0 계획

  • Web Worker를 활용한 백그라운드 계산
  • 더 많은 인디케이터 추가
  • 실시간 데이터 스트리밍 최적화
  • 모바일 터치 제스처 개선
  • 서버 사이드 렌더링 지원

v3.0 비전

  • 3D 차트 뷰
  • AI 기반 패턴 인식
  • 다중 차트 동기화
  • 클라우드 저장소 통합

라이선스

MIT License

기여 가이드

프로젝트에 기여하고 싶으시다면:

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Create a Pull Request

지원

  • 이슈 트래커: GitHub Issues
  • 문서: /docs 디렉토리
  • 예제: /examples 디렉토리