Tùy biến

Mọi cách biến biểu đồ thành của bạn, từ chỉnh nhẹ nhất tới sâu nhất. Phần lớn ứng dụng chỉ cần hai, ba cách: một theme, vài công tắc, một nút của riêng mình.

● DemoGiao diện của riêng bạnDữ liệu thị trường giả lập, sinh ngay trong trình duyệt của bạn

Muốn đổi gì thì dùng gì

Bạn muốn đổi	Dùng
Màu	`theme` (`'dark'`, `'light'` hoặc theme của bạn), `setTheme` — API
Góc bo, kích thước, kiểu chữ và các thanh của widget	`ui` / `setUI` — Giao diện
Một phần giao diện biểu đồ: lưới, crosshair, màu của một loại biểu đồ	`applyOverrides` theo khoá — Giao diện
Các đường của một chỉ báo, nền của một pane	`updateIndicatorStyle(id, { plots })`, `setPaneStyle`
Phần nào của widget được hiện	`features` / `setFeatures` — bên dưới
Người dùng được làm gì trên biểu đồ: vẽ, giao dịch, zoom	Features riêng của biểu đồ: `chartOptions: { features: { drawings: false } }`
Nút, menu và mục trạng thái của riêng bạn	`addToolbarButton`, `addToolbarDropdown`, `addSidebarButton`, `addStatusBarItem`, `getSlot`, các hook menu — bên dưới
Phím tắt của riêng bạn	`addHotkey` — bên dưới
CSS của riêng bạn	Các móc ổn định: `--tcw-*`, `data-tcw-part` — bên dưới
Chữ của widget	`locale`, `messages` — bên dưới
Chỉ báo, công cụ vẽ hay loại biểu đồ của riêng bạn	Plugin
Toàn bộ giao diện	`Chart` headless, với giao diện của bạn bao quanh — API

Công tắc tính năng

Mỗi phần của widget có một công tắc, và công tắc nào cũng bật cho tới khi bạn tắt. Tên không có dấu chấm là cả một tính năng, tắt ở mọi nơi nó xuất hiện: alerts bỏ cái chuông, các mục cảnh báo trong menu và các thông báo cảnh báo. Tên có dấu chấm là một chỗ: toolbar.alerts chỉ bỏ cái chuông, menu vẫn có cảnh báo. Công tắc đổi được khi widget đang chạy.

const widget = new ChartWidget(host, {
  features: {
    'toolbar.replay': false,          // một nút
    'sidebar.patterns': false,        // một nhóm công cụ vẽ
    'menu.chart.exportData': false,   // một mục menu
    hotkeys: false,                   // mọi phím tắt của widget
  },
})

widget.setFeatures({ sidebar: false, statusBar: false })   // một biểu đồ gọn, ngay khi đang chạy
widget.isFeatureOn('sidebar')        // false
widget.getFeatures()                 // mọi công tắc, bật hay tắt
grid.setFeatures({ toasts: false })  // mọi biểu đồ của một ChartWidgetGrid

Các tên là một cam kết: có thể thêm tên mới, không đổi tên cũ. Chúng nằm trong WIDGET_FEATURES và được TypeScript kiểm tra; tên lạ bị bỏ qua kèm một cảnh báo.

Công tắc chỉ ẩn, hiện các phần của chính widget. Muốn chặn một việc trên biểu đồ — vẽ, giao dịch, zoom, một khung thời gian — hãy dùng features của biểu đồ (chartOptions.features). Những phần mang theo dữ liệu hay bộ nhớ vẫn là option: trading, watchlist, depthLadder và layouts quyết định chúng có mặt hay không, còn công tắc ẩn các nút của chúng.

Các option bật/tắt cũ chính là những công tắc này, vẫn dùng như trước:

Option	Công tắc
`toolbar: false`	`toolbar`
`drawingTools: false`	`sidebar`, `drawingSettings`, `hotkeys.tools`, `menu.chart.horizontalLine`
`statusBar: false`	`statusBar`, `goToDate`
`rangeBar: false`	`statusBar.range`, `goToDate`
`accountPanel: false`	`accountPanel`, `orderTicket`
`indicatorLegend`, `settings`, `alerts`, `objectTree`, `indicatorTemplates`, `intervalTyping`, `symbolInfo`, `navigation`, `dragDropImport`, `customTimeframes`, `fullscreen`	Công tắc cùng tên

Tất cả công tắc

Nhóm	Công tắc
Các thanh	`toolbar` `sidebar` `statusBar`
Tính năng	`alerts` `objectTree` `symbolInfo` `symbolSearch` `settings` `indicatorSettings` `drawingSettings` `dataWindow` `commandPalette` `hotkeySheet` `goToDate` `replay` `screenshot` `copyImage` `shareView` `autoFib` `themeToggle` `fullscreen` `accountPanel` `orderTicket` `bracketOrders` `depthLadder` `layouts` `indicatorTemplates` `compare` `indicatorLegend` `navigation` `customTimeframes` `intervalTyping` `dragDropImport` `hotkeys` `toasts`
Toolbar	`toolbar.symbol` `toolbar.symbolInfo` `toolbar.timeframes` `toolbar.timeframeMenu` `toolbar.chartType` `toolbar.indicators` `toolbar.layouts` `toolbar.replay` `toolbar.bracketOrders` `toolbar.depthLadder` `toolbar.accountPanel` `toolbar.objectTree` `toolbar.alerts` `toolbar.screenshot` `toolbar.settings` `toolbar.themeToggle` `toolbar.fullscreen`
Thanh công cụ vẽ	`sidebar.cursor` `sidebar.favorites` `sidebar.lines` `sidebar.fibonacci` `sidebar.patterns` `sidebar.forecasting` `sidebar.annotation` `sidebar.style` `sidebar.magnet` `sidebar.eraser` `sidebar.zoomArea` `sidebar.stayInDrawing` `sidebar.undo` `sidebar.redo` `sidebar.clear`
Thanh trạng thái	`statusBar.range` `statusBar.goToDate` `statusBar.market` `statusBar.connection` `statusBar.symbol` `statusBar.rangeTimeframe`
Trên biểu đồ	`indicatorLegend.values` `indicatorLegend.visibility` `indicatorLegend.settings` `indicatorLegend.remove` `indicatorLegend.more` `pane.move` `pane.collapse` `pane.maximize` `navigation.zoom` `navigation.scroll` `navigation.reset` `selectionToolbar`
Menu	`menu.chart` `menu.chart.alert` `menu.chart.order` `menu.chart.orderTicket` `menu.chart.horizontalLine` `menu.chart.resetView` `menu.chart.drawings` `menu.chart.exportData` `menu.chart.settings` `menu.chart.scale` `menu.chart.goToDate` `menu.chart.paneScale` `menu.priceAxisAdd` `menu.drawing` `menu.drawing.settings` `menu.drawing.alert` `menu.drawing.order` `menu.drawing.group` `menu.drawing.lock` `menu.drawing.hide` `menu.drawing.duplicate` `menu.drawing.delete`
Phím tắt	`hotkeys.commandPalette` `hotkeys.symbolSearch` `hotkeys.save` `hotkeys.tools` `hotkeys.invertScale` `hotkeys.goToDate` `hotkeys.help`

Vài công tắc làm nhiều hơn tên gọi: tắt indicatorLegend thì các pane lấy lại tiêu đề của mình; menu.chart.* áp cho cả nút "+" cạnh trục giá lẫn menu chuột phải; compare bỏ nút thêm trong cây đối tượng, còn các so sánh đang có vẫn nằm trong danh sách; toasts tắt thông báo của chính widget (thông báo lỗi vẫn hiện), còn thông báo của bạn qua widget.toast() vẫn hiện. Tắt selectionToolbar sẽ ẩn thanh công cụ trên hình được chọn; menu chuột phải vẫn còn. Tắt statusBar.rangeTimeframe sẽ giữ nguyên khung thời gian khi một khoảng trên thanh khoảng thời gian dài hơn số nến vừa màn hình; bật thì chuyển sang tuần hoặc tháng rồi quay về.

Thông báo của bạn có thể kèm một icon trong bộ icon của widget, theo tên ('bell', 'check', 'info'…), như thông báo alert của widget kèm icon chuông. Widget không dùng emoji ở đâu cả: mọi icon, kể cả nhãn trên biểu đồ, đều từ cùng một bộ.

widget.toast('Order filled at 64,200', 'info', 'check')  // the icon set's check before the text
widget.toast('Feed lost', 'error', 'info')

Phần của riêng bạn

Nút, menu và mục của bạn nằm trong các thanh của widget, trông như của widget và theo theme lẫn giao diện của nó. Mỗi hàm trả về một handle để đổi hoặc gỡ, và phần đó hiện khi thanh của nó hiện.

widget.addToolbarButton({ id: 'news', label: 'News', icon: 'bell', toggle: true, onClick })

widget.addToolbarDropdown({
  id: 'scans',
  label: 'Scans',
  icon: 'layers',
  side: 'left',                              // cạnh các nút điều khiển biểu đồ
  items: () => [                             // được hỏi lại mỗi lần mở
    { label: 'Breakouts', onSelect: () => runScan('breakouts') },
    { label: 'Live only', checked: liveOnly, onSelect: () => (liveOnly = !liveOnly) },
  ],
})

const ruler = widget.addSidebarButton({ id: 'ruler', label: 'Ruler', icon: 'ruler', toggle: true,
  onClick: () => ruler?.setActive(toggleRuler()) })

const latency = widget.addStatusBarItem({ id: 'latency', text: '12 ms', label: 'Latency' })
latency?.setText('15 ms')
widget.addHotkey({ keys: 'Alt+N', label: 'New note', onPress: () => addNote() })   // thay phím tắt của widget nếu trùng phím; có trong bảng phím tắt (?)

// Bất cứ gì khác của bạn: cạnh các nút của toolbar, dưới các nút của sidebar,
// ở hai đầu thanh trạng thái, hoặc trên biểu đồ
widget.getSlot('chart')?.append(myOverlay)   // lớp này cho con trỏ đi qua; phần tử của bạn cần pointer-events: auto

Các slot: toolbar.left, toolbar.right, sidebar, statusBar.left, statusBar.right, chart.

Mục của bạn nằm cuối các menu của widget, được hỏi lại mỗi lần một menu mở, kèm chỗ nó mở.

new ChartWidget(host, {
  chartMenuItems: ({ area, price }) => area === 'plot' && price !== undefined
    ? [{ label: 'Copy price', onSelect: () => copy(price) }]
    : [],
  drawingMenuItems: ({ id, type, selected }) => [{ label: 'Share', icon: 'link', onSelect: () => share(id) }],
  indicatorMenuItems: ({ instanceId, indicatorId }) => [{ label: 'Explain', onSelect: () => explain(indicatorId) }],
})

CSS của riêng bạn

Widget là một phần của trang, không nằm trong iframe, nên CSS của bạn chạm được tới nó. Những móc sau giữ nguyên suốt 1.x:

Biến --tcw-* trên .tcw-root: các token giao diện (xem Giao diện).
[data-tcw-part~="toolbar.screenshot"]: mỗi phần mang tên các công tắc của nó, nên một rule tìm được nó bằng chính tên đó.
.tcw-root[data-tcw-off~="sidebar"]: các công tắc đang tắt, trên phần tử gốc của widget.
[data-host-button="id"], [data-host-item="id"]: nút và mục trạng thái của riêng bạn, theo id bạn đặt.

Các tên class khác là của riêng widget và có thể đổi: hãy style qua các móc trên.

/* nút toolbar của bạn theo màu nhấn */
.tcw-root [data-host-button="news"] { color: var(--tcw-accent); }
/* một panel của bạn rộng hơn khi công cụ vẽ bị tắt */
.my-layout:has(.tcw-root[data-tcw-off~="sidebar"]) .my-panel { width: 320px; }

Chữ

Widget nói 30 ngôn ngữ (locale; tiếng Anh và tiếng Việt có sẵn, các ngôn ngữ khác nạp từ @tradecanvas/chart/widget/locales). messages đổi bất kỳ chuỗi nào, đè lên chuỗi của ngôn ngữ. Tên chỉ báo giữ nguyên.

import { de } from '@tradecanvas/chart/widget/locales'

new ChartWidget(host, {
  locale: 'de',
  messages: { ...de, 'toolbar.indicators': 'Studien' },
})

Sâu hơn

Chỉ báo, công cụ vẽ và loại biểu đồ của riêng bạn đăng ký dưới dạng plugin, rồi chạy như những cái có sẵn, kể cả trong menu. Muốn một giao diện hoàn toàn của bạn, hãy dùng Chart headless: cùng một engine, không có widget.