문서2.0으로 마이그레이션

2.0으로 마이그레이션

2.0에서는 차트와 위젯의 기본 외관이 달라졌고, 1.x에서 deprecated였던 이름이 제거되었으며, 네 가지 동작이 바뀌었습니다. 데이터, 저장한 레이아웃, 지표, 그리기, 트레이딩, 테마는 그대로 이어집니다. 이 페이지는 변경 사항을 하나씩 짚고 무엇을 해야 하는지 설명합니다.

설치

2.0은 현재 정식 버전입니다. 모든 패키지가 npm의 latest 태그로 2.0.0으로 배포됩니다. 아직 옮기기 어려운 페이지를 위해 1.x는 @tradecanvas/chart@1로 그대로 남아 있습니다.

npm install @tradecanvas/chart

# 프레임워크 컴포넌트를 쓴다면 그 패키지도 함께
npm install @tradecanvas/react
npm install @tradecanvas/vue
npm install @tradecanvas/svelte

기본 외관

차트와 위젯은 그리는 것 주변에 전보다 넓은 여유를 두고 열립니다. 옵션 하나로 1.x의 외관을 유지할 수 있습니다.

// 1.x 그대로의 위젯
new ChartWidget(host, { ui: { density: 'classic' } })
widget.setUI({ density: 'classic' })

// 1.x 그대로의 직접 만든 차트
new Chart(host, { density: 'compact' })

ui: { density: 'compact' }(더 작은 컨트롤)는 달라지지 않았습니다.

기본값에서 달라진 점:

대상1.x2.0
가장 최근 봉 뒤의 여백5칸8칸
가격 위아래의 여백높이의 9%높이의 11.5%
단독으로 쓰는 Chart의 봉classicgolden. 몸통이 칸의 62%이며, 위젯이 이미 그리던 방식입니다
범례 위치(그리기 영역의 모서리에서)8 px 안쪽12 px 안쪽
단독 Chart의 숫자(축, 태그, 범례)고정폭 글꼴시스템 산세리프 글꼴(위젯, 금융 차트와 동일). font: { family: MONO_FONT_FAMILY }로 이전 글꼴을 유지할 수 있습니다
위젯의 간격 --tcw-space-1 … -72 · 3 · 5 · 8 · 13 · 21 · 34 px2 · 4 · 6 · 8 · 12 · 20 · 32 px
Print의 버튼33 px34 px
버튼 레이블 양옆의 여백8 px12 px

위젯의 모든 크기와 간격은 이제 짝수 픽셀이며, 화면 배율 125%와 150%에서 가는 선은 기기 픽셀 하나 너비로 그려집니다.

코드에서 확인할 부분:

  • --tcw-space-*를 덮어쓰는 CSS, 또는 컨트롤이 33 px라고 가정하는 CSS.
  • rightMargin을 넘기는 코드. 지정한 값은 여전히 우선합니다.
  • React, Vue, Svelte 컴포넌트는 더 이상 rightMargin: 5를 스스로 설정하지 않습니다. 유지하려면 options에 density: 'compact'나 rightMargin: 5를 넘기세요.
  • @tradecanvas/core의 PRICE_SCALE_MARGIN이나 DEFAULT_CHART_OPTIONS.rightMargin을 읽는 코드. 둘 다 값이 바뀌었습니다.
// React. Vue와 Svelte 컴포넌트도 같은 options를 받습니다
<TradeCanvas options={{ density: 'compact' }} />
<TradeCanvas options={{ rightMargin: 5 }} />

각 밀도가 정하는 값 전체는 스타일링 → 밀도에 있습니다.

제거된 이름

모두 1.x에서 deprecated였고, 2.0에는 없습니다.

제거됨대신 쓸 것
chart.setTimezone(tz)chart.setTimeZone(tz)
chart.getTimezone()chart.getTimeZone()
chart.getEffectiveTimezone()chart.getEffectiveTimeZone()
chart.getExchangeTimezone()chart.getExchangeTimeZone()
chart.setTimezoneOffset(minutes)chart.setTimeZone(minutes): UTC에서 동쪽으로 몇 분인지, 또는 브라우저의 시간대를 쓰려면 null
EXCHANGE_TIMEZONEEXCHANGE_TIME_ZONE
DEFAULT_FONT_FAMILYMONO_FONT_FAMILY: 고정폭 글꼴이며, 더 이상 기본 글꼴이 아닙니다
SymbolInfo.timezoneSymbolInfo.timeZone
timeFormatter에서의 TimeFormatContext.kind === 'date'시간 축은 'year', 'month', 'day'를 줍니다. 'date'는 1.x에서 이미 주지 않았고, 이제 타입에서도 빠졌습니다.
SessionBreaks.setLocale()과 SessionBreaks.renderLabels()(@tradecanvas/core)호출을 지우세요. 둘 다 아무 일도 하지 않았습니다.
위젯의 문자열 키 replay.barsPerSecondmessages 재정의에서 지우세요. 쓰이지 않던 키입니다. 리플레이 속도 문구는 replay.rate입니다.

종목의 timezone은 더 이상 읽지 않습니다

이전 필드는 전혀 읽지 않습니다. timezone만 주는 종목은 symbols, resolveSymbol, 피드, 어댑터 어디에서 왔든 이제 자체 시간대가 없는 것으로 다룹니다.

  • setTimeZone('exchange')와 일봉의 날짜는 시장의 시간대로, 그것도 없으면 UTC로 돌아갑니다.
  • 종목 자체의 sessions는 음영으로 표시되지 않습니다(시장을 설정했다면 시장의 거래 시간은 표시됩니다).
  • 종목의 상태는 24시간 거래되는 시장으로 표시되고, 종목 정보 패널에 시간대가 나타나지 않습니다.

여전히 넘기는 timezone은 getSymbolInfo()에 그대로 남지만 어디에서도 읽지 않습니다.

// 1.x
chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York' })

// 2.0
chart.setSymbolInfo({ symbol: 'AAPL', timeZone: 'America/New_York' })

바뀌지 않은 이름

이름이 서로 비슷하니 찾아 바꾸기를 할 때 주의하세요. 위젯의 설정은 여전히 timezone으로 씁니다.

widget.setSettings({ timezone: 'exchange' })
widget.getSettings().timezone       // 'exchange'

위젯의 문자열 키 settings.timezone과 menu.chart.timezone도 이름이 그대로입니다.

찾는 방법

코드에서 Timezone(과 EXCHANGE_TIMEZONE, 그리고 종목 객체 안의 timezone:을 검색하세요. 제거된 이름은 TypeScript가 하나하나 오류로 알려 줍니다.

달라진 동작

이름은 그대로이고 동작만 바뀐 것들입니다.

  • 패널 가장자리의 가격 축 레이블. 패널의 위쪽이나 아래쪽 가장자리에 잘리게 되는 레이블은 그리지 않습니다. 그 격자선은 남습니다.
  • 패널이 많을 때의 가격 패널. 지표 패널을 몇 개 열든 가격 패널은 차트 높이의 38.2% 이상을 유지하고, 열린 패널들은 나머지를 각자의 크기에 비례해 나눠 가집니다. 패널에 지정한 크기는 보존되며, 차트가 높아지면 다시 그 크기로 보입니다. 전에는 패널이 높이를 유지해서 가격 패널에 높이가 남지 않을 수 있었습니다.
  • 정수 픽셀 사이의 선 너비. 그런 너비의 선은 그 너비를 넘지 않는 정수 개의 기기 픽셀로 그려집니다. 1.5 px는 100%에서 기기 픽셀 하나입니다(전에는 둘).
  • setBarLayout()과 setDensity(). 실행 중에 chart.setBarLayout()으로 정한 봉 레이아웃은 나중에 setDensity()를 호출해도 유지됩니다.

달라지지 않은 것

  • 데이터: DataAdapter, DataFeed, setData, appendBar, updateLastBar.
  • 1.x에서 저장한 레이아웃과 설정은 전과 같이 불러옵니다.
  • 지표, 그리기, 트레이딩, 테마, 스타일 키의 이름은 그대로입니다.