오실레이터 — RSI · Stochastic

own pane의 오실레이터 배선 — 축은 정의가 정한다: RSI·Stochastic은 0~100 고정, Williams %R은 −100~0, 무경계인 CCI만 autoScale에 ±100 기준선이다. 기준선(70/30·80/20·±100·−20/−80)이 pane마다 같이 선다.

소스

apps/examples/src/cases/oscillators.ts — CI가 타입체크하는 실물이다.

import { PlotBuilder, browserDeps } from "@finchart/dom";
import type { OHLC } from "@finchart/core";
import { candleSeries, priceFormat, timeTicks } from "@finchart/core";
import { legend } from "@finchart/dom";
import {
  attachCci,
  attachRsi,
  attachStochastic,
  attachWilliamsR,
} from "@finchart/indicators";
import { fixtureCandles } from "./fixture";
import { chartHost } from "./stage";

export const title = "오실레이터 — RSI · Stochastic · CCI · %R";
export const description =
  "own pane의 오실레이터 배선 — 축은 정의가 정한다: RSI·Stochastic은 0~100 고정, Williams %R은 −100~0, 무경계인 CCI만 autoScale에 ±100 기준선이다. 기준선(70/30·80/20·±100·−20/−80)이 pane마다 같이 선다.";

export function mount(container: HTMLElement): () => void {
  const host = chartHost(container, 720);
  const plot = PlotBuilder.create<OHLC>(browserDeps({ autoSize: true }))
    .setSize(container.clientWidth || 900, 720)
    .setAxis({
      x: { ticks: timeTicks({ timeZone: "UTC", locale: "ko" }) },
      y: { position: "right", format: priceFormat({ compact: true, locale: "ko" }) },
    })
    .build(host);

  const price = plot.mainPane.addSeries({
    series: candleSeries(),
    data: fixtureCandles(),
    name: "가격",
  });

  plot.use(attachRsi({ source: price }));
  plot.use(attachStochastic({ source: price }));
  plot.use(attachCci({ source: price }));
  plot.use(attachWilliamsR({ source: price }));
  plot.use(legend({}));

  return Object.assign(
    () => {
      plot.destroy();
      host.remove();
    },
    { requestRender: () => plot.requestRender() },
  );
}