플러그인

사용자 지정 지표, 그리기 도구, 차트 유형, 오버레이로 차트를 확장합니다. 전역으로 등록하거나 차트별로 등록할 수 있습니다.

등록

등록 방법은 세 가지이며, 우선순위 순서로 전역 기본값, 생성자, 인스턴스에 대한 명령형 호출입니다.

import { Chart, registerPlugin } from '@tradecanvas/chart'

// 1) Global — every Chart created afterward inherits it
registerPlugin({ kind: 'indicator', plugin: new MyIndicator() })

// 2) Per-chart at construction
const chart = new Chart(el, { plugins: [{ kind: 'overlay', plugin: myHeatmap }] })

// 3) Imperative on an instance
chart.plugins.register({ kind: 'chartType', plugin: myCandles })
chart.plugins.unregister('chartType:my-candles')
chart.plugins.list()

플러그인 종류

종류계약렌더링 위치
indicatorIndicatorPlugin — calculate() + render()오버레이 또는 패널
drawingDrawingPlugin — render() + hitTest()오버레이 레이어
chartTypeChartTypePlugin — createRenderer() + 선택적 transform()메인 시리즈
overlayOverlayPlugin — render(ctx, { viewport, data, theme })main / overlay / ui

사용자 지정 지표

그리기 헬퍼를 쓰려면 IndicatorBase를 상속한 다음, 내장 지표처럼 등록하고 추가합니다.

import { IndicatorBase, IndicatorValueMap, registerPlugin } from '@tradecanvas/chart'

class DoubleSMA extends IndicatorBase {
  descriptor = {
    id: 'double-sma', name: 'Double SMA',
    placement: 'overlay', defaultConfig: { fast: 10, slow: 30 },
  }
  calculate(data, config) { /* values = new IndicatorValueMap(); return { values, series } */ }
  render(ctx, output, viewport, style) { /* draw lines */ }
}

registerPlugin({ kind: 'indicator', plugin: new DoubleSMA() })
chart.addIndicator('double-sma', { fast: 10, slow: 30 })

values에는 new Map() 대신 new IndicatorValueMap()을 사용하세요. Map을 그대로 대체할 수 있으면서, 시간 순서대로 한 봉씩 채울 때 몇 배 더 저렴합니다. 종목이나 시간 단위를 전환할 때마다 전체 과거 데이터에 대해 바로 이 작업을 합니다.

빠른 실시간 업데이트 (선택 사항)

실시간 틱마다 바뀌는 것은 형성 중인 봉뿐입니다. 전체 과거 데이터 대신 from 이후의 봉만 다시 계산하도록 update()를 구현하세요. 차트는 틱과 새 봉이 들어올 때 이 메서드를 사용하며, 메서드가 없거나 null을 반환하면 calculate()를 대신 사용합니다. 결과는 calculate()가 만들 값과 같아야 합니다.

update(data, config, prev, from) {
  if (!this.canResume(data, prev, from)) return null   // IndicatorBase helper
  for (let i = from; i < data.length; i++) {
    this.writePoint(prev, data, i, { value: /* recompute bar i */ 0 })
  }
  return prev
}

사용자 지정 그리기 도구

앵커를 픽셀로 바꾸기, 선 스타일, 핸들 같은 헬퍼를 쓰려면 DrawingBase를 상속하고, 도구를 기술한 다음 등록합니다. descriptor.options에 나열한 설정은 위젯의 설정 대화상자에 나타나며 그림과 함께 저장됩니다.

import { DrawingBase, registerPlugin } from '@tradecanvas/chart'

class TargetLine extends DrawingBase {
  descriptor = {
    type: 'targetLine', name: 'Target Line', requiredAnchors: 1,
    options: { label: { kind: 'text', label: 'Label', default: 'Target' } },
  }
  render(ctx, state, viewport, selected) { /* this.anchorToPixel(state.anchors[0], viewport) 위치에 */ }
  hitTest(point, state, viewport, tolerance) { /* 포인터가 그 위에 있는가? */ return false }
  // 선택 사항: 선의 가격. 알림이 선을 따라갈 수 있게 함
  priceAt(state) { return [state.anchors[0].price] }
}

registerPlugin({ kind: 'drawing', plugin: new TargetLine() })
chart.setDrawingTool('targetLine')

디스크립터에는 도구를 그리는 방식(creation: 'clicks', 'freehand' 또는 'path', maxAnchors 포함)과 대화상자에서 채우기(fill)나 텍스트(text)를 제공할지도 적을 수 있습니다. 도구는 moveHandle()로 앵커가 아닌 핸들을 옮길 수 있고, 봉을 바탕으로 그릴 때는 setDataGetter()를 통해 차트의 봉을 받습니다.

사용자 지정 차트 유형

ChartTypePlugin은 렌더러와 선택적 데이터 변환을 제공합니다. 내장 유형처럼 전환해 사용합니다.

registerPlugin({
  kind: 'chartType',
  plugin: {
    descriptor: { type: 'my-bricks', name: 'My Bricks' },
    createRenderer: () => new MyBrickRenderer(),
    transform: (raw) => toBricks(raw),   // optional
  },
})

chart.setChartType('my-bricks')

사용자 지정 오버레이

OverlayPlugin은 선택한 레이어에 매 프레임 그리며, 실시간 뷰포트, 데이터, 테마를 전달받습니다.

registerPlugin({
  kind: 'overlay',
  plugin: {
    descriptor: { id: 'vwap-band', name: 'VWAP Band', layer: 'main' },
    render(ctx, { viewport, data, theme }) {
      // draw onto the main layer with the current viewport + data
    },
  },
})

플러그인 타입 시그니처 전체는 API 레퍼런스를 참고하세요.