@finchart

Appearance

Documentation / @finchart/indicators

@finchart/indicators ​

@finchart/core의 계산 노드 위에 지은 금융 지표 — MA(단순·지수)·MACD· 볼린저·RSI·ATR·Stochastic·VWAP·OBV·ADX·Ichimoku·Parabolic SAR. 한 번 계산해 여러 그림을 먹이고(macd.out.signal), attach* 플러그인이 설치·해제를 한 줄로 만든다. 오실레이터(RSI·Stoch)는 own pane일 때 0–100 고정 축과 기준선까지 배선한다. 코어 커밋 0건으로 만들어졌다 — 그것이 이 패키지의 존재 증명이다.

설치 ​

아직 npm에 발행 전이다 — 스코프 선점 전이고 버전은 0.0.1이다. 지금 써 보려면 저장소를 클론해 pnpm build 뒤 pnpm pack으로 tarball을 만들어 설치한다(절차는 저장소 루트 README의 "시작하기"에 있다). 아래는 발행 뒤의 모습이다.

sh
pnpm add @finchart/indicators @finchart/core

@finchart/core는 peer다 — 함께 설치한다.

  • 누적 지표(VWAP·OBV)는 volume이 없는 봉부터 null이다 — 값이 있는 척하지 않는다. VWAP의 anchor(세션 리셋)만 누적을 되살린다.
  • Ichimoku의 선행·후행은 인덱스로 이동한다 — 미래 x를 지어내지 않으므로 마지막 캔들 너머의 구름은 그리지 않는다.

입력은 어디서 오나 — addSeries가 돌려주는 손잡이다 ​

모든 지표가 source를 요구하는데, 그것은 이미 네 손에 있다: addSeries가 돌려주는 손잡이가 곧 Source다.

단 루트 README의 60초 지름길(PlotBuilder.create(deps, series) + addDataPoints)로 얹었다면 손잡이가 없다 — 그 길은 "캔들 하나만 띄운다"는 용도라 아무것도 안 돌려준다. plot.mainPane을 source에 넣으면 TS2741: Property 'read' is missing in type 'PaneApi'다. 아래처럼 빌더에는 시리즈를 안 주고 addSeries로 얹는다. 실시간 갱신 문 (updateLast)과 지표 입력이 같은 물건이라, 시리즈를 얹은 순간 지표의 재료도 생긴다.

ts
const plot = PlotBuilder.create<OHLC>(browserDeps({ autoSize: true })).build(host);

// 이 손잡이가 Source다 — 아래 두 줄이 전부 이것을 먹는다.
const price = plot.mainPane.addSeries({ series: candleSeries(), data: bars, name: "가격" });

plot.mainPane.use(attachMovingAverage({ source: price, period: 20 })); // 가격 위에 겹친다
plot.use(attachRsi({ source: price }));                                // 자기 pane을 만든다

price.updateLast({ x, open, high, low, close });  // 같은 손잡이가 실시간 문이다

attach*가 어디에 얹히나가 두 줄의 차이다 — plot.mainPane.use(...)는 그 pane에 겹치고, plot.use(...)는 오실레이터라 자기 pane을 새로 만든다 (RSI·Stochastic은 0–100 고정 축과 기준선까지 배선된다).

계산을 나눠 쓰려면 팩토리를 직접 쓴다 ​

attach*는 "계산 + 그리기"를 한 줄로 묶은 것이다. 한 계산을 여러 그림이 나눠 먹어야 하면 팩토리를 쓰고 출력(out.*)을 각자 잇는다 — 볼린저의 밴드와 중심선이 sma를 두 번 돌지 않는다.

ts
const boll = bollingerBands(price, { period: 20 });
boll.out.band;    // Source — 밴드
boll.out.middle;  // Source — 중심선 (같은 sma를 나눠 쓴다)

React에서는 이 출력이 <ChartLine input={...}>·<ChartSeries input={...}>의 모양 그대로다.

파라미터를 바꾸는 길은 재설치다 — dispose() 하고 새 옵션으로 다시 use() 한다. 계산 노드는 값이라 재생성이 싸다.

지원 범위 ​

  • Node 18+ — SSR·worker·테스트가 지나는 headless 경로.
  • 브라우저 — Chrome 98+ · Edge 98+ · Firefox 94+ · Safari 15.4+ (2022-03). 하한을 정하는 것은 structuredClone·Object.hasOwn·Array.prototype.at이고, 폴리필은 싣지 않는다 — 더 낮은 곳을 지원하려면 소비자가 넣는다.
  • 저장소의 개발 환경(Node 24 · pnpm 11)은 이보다 높다. 그것은 기여자의 하한이지 소비자의 것이 아니다.

문서 ​

Interfaces ​

Type Aliases ​

Variables ​

Functions ​