ドキュメント2.0 への移行

2.0 への移行

2.0 では、チャートとウィジェットの既定の外観が変わり、1.x で非推奨になっていた名前が削除され、4 つの動作が 変わりました。データ、保存したレイアウト、インジケーター、描画、取引、テーマはそのまま使えます。このページでは、 変更点とその対応を順に挙げます。

インストール

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 つで 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% のとき、細線はデバイスピクセル 1 つ分の幅になります。

ご自身のコードで確認する点：

  • --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 で非推奨になっていたもので、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 が 1 つずつエラーとして報告します。

変わった動作

名前の変更を伴わない変更です。

  • ペインの端にかかる価格軸のラベル。ペインの上端または下端で切れてしまうラベルは描かれません。 そのグリッド線は残ります。
  • ペインが多いときの価格ペイン。インジケーターペインをいくつ開いても、価格ペインはチャートの高さの 38.2% 以上を保ち、開いているペインは残りをそれぞれのサイズに比例して分け合います。ペインに設定したサイズは 保持され、チャートが高くなれば再びそのサイズで表示されます。以前はペインが高さを保ったため、価格ペインの高さが なくなることがありました。
  • 整数ピクセルの間の線幅。そのような幅の線は、その幅を超えない整数個のデバイスピクセルで 描かれます。1.5 px は 100% でデバイスピクセル 1 つ分です（以前は 2 つ分）。
  • setBarLayout() と setDensity()。実行中に chart.setBarLayout() で設定したバーのレイアウトは、その後の setDensity() でも保たれます。

変わっていないもの

  • データ：DataAdapter、DataFeed、setData、appendBar、 updateLastBar。
  • 1.x で保存したレイアウトと設定は、これまでどおり読み込めます。
  • インジケーター、描画、取引、テーマ、スタイルキーの名前は変わっていません。