Tuỳ biến giao diện widget

Giao diện của widget là một bộ token: góc bo của từng loại thành phần, kích thước nút và thanh, kiểu chữ, đường viền, bóng đổ, cách hiện nút đang chọn, và việc thanh công cụ cùng công cụ vẽ nằm sát cạnh hay nổi lên. Bắt đầu từ một preset rồi đổi những gì bạn muốn. Màu sắc vẫn do chủ đề màu quyết định (dark / light, xem Tham chiếu API); giao diện nào cũng dùng được với cả hai.

Các preset

Preset	Giao diện
`studio` (mặc định)	Nút bo góc 7 px, menu 11 px và hộp thoại 16 px. Các nhóm cách nhau bằng khoảng trống thay vì đường kẻ, menu nổi trên bóng đổ mềm, các nút khung thời gian nằm trong một rãnh phân đoạn, và nút đang chọn được tô màu nhạt.
`terminal`	Dày đặc và vuông vức: góc 2 px, nút cao 26 px, đường kẻ giữa các nhóm, nhãn chữ in hoa, và gạch chân dưới nút đang chọn. Nhãn giá trên biểu đồ có góc vuông.
`capsule`	Hình viên thuốc ở khắp nơi, kể cả nhãn giá. Thanh công cụ và công cụ vẽ nổi thành những hòn đảo, menu là kính mờ, và nút đang chọn là một viên thuốc tô đặc.

Chọn giao diện

import { ChartWidget, ChartWidgetGrid } from '@tradecanvas/chart/widget'

const widget = new ChartWidget(host, { ui: 'terminal' })
widget.setUI('capsule')        // in place: nothing is rebuilt
widget.getUI()                 // every token, resolved

// A grid: every chart and the grid's bar, and the charts it adds later
const grid = new ChartWidgetGrid(host, { layout: '2x2', widget: { ui: 'terminal' } })
grid.setUI('studio')
grid.getUI()

Giao diện của riêng bạn

Một giao diện tự định nghĩa bắt đầu từ một preset (Studio nếu bạn không chỉ định) và chỉ đổi những gì nó nêu ra. Góc bo đặt trên thang sẽ áp dụng cho mọi thành phần đi theo thang đó, trừ khi bạn đặt riêng cho thành phần ấy.

widget.setUI({
  preset: 'studio',
  radius: { xs: 3, sm: 5, md: 10, lg: 12, xl: 18 },  // the scale, px (999: pills)
  components: { dialog: 20, tag: 0 },                // a part's own corners
  density: 'compact',                                // compact · comfortable · spacious
  sizes: { toolbar: 40 },                            // px; wins over density
  font: {
    family: "'Manrope', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    size: 13, weight: 500, strongWeight: 600,
    labelCase: 'uppercase', labelTracking: 0.06,      // small labels
  },
  borders: { width: 1, separators: true },           // rules between toolbar groups
  shadows: { menu: '0 12px 30px rgba(0, 0, 0, 0.4)' },
  blur: 12,                                          // frosted floating surfaces, px
  active: 'solid',                                   // tint · solid · underline
  toolbar: 'floating',                               // docked · floating
  sidebar: 'floating',
  intervals: 'segmented',                            // plain · segmented
  tagRadius: 999,                                    // the chart's price tags and pills
})

Trường	Đặt gì
`radius`	Thang góc bo `xs`, `sm`, `md`, `lg`, `xl`, tính bằng px (0–999).
`components`	Góc bo riêng của từng thành phần: `control` (nút), `input`, `menu`, `dialog`, `panel` (cảnh báo, cửa sổ dữ liệu, phiếu đặt lệnh), `tooltip`, `tag`, `toast`, `toolbar` và `sidebar` (khung của chính chúng, thấy được khi chúng nổi). Mặc định, nút và ô nhập theo `md`, menu và bảng theo `lg`, hộp thoại theo `xl`, tooltip và nhãn theo `sm`.
`density` / `sizes`	Chiều cao `toolbar`, chiều cao `control` và `controlSmall`, `icon`, độ rộng `sidebar` và chiều cao `menuItem`, tính bằng px.
`font`	Họ font (danh sách CSS), `size` của chữ thân (11–20 px; các cỡ nhỏ đi theo nó), độ đậm, cùng kiểu chữ hoa/thường và khoảng cách chữ (em) của các nhãn nhỏ như tiêu đề mục.
`borders`	Độ dày đường viền, và có kẻ đường phân cách giữa các nhóm trên thanh công cụ và giữa các công cụ vẽ hay không.
`shadows`	Bóng đổ CSS của menu, hộp thoại và tooltip.
`blur`	Menu kính mờ, tính bằng px: lớn hơn 0 thì menu để lộ một phần biểu đồ phía sau, đã làm mờ.
`active`	Cách hiện nút đang chọn: tô màu nhạt, viên thuốc tô đặc, hoặc gạch chân.
`toolbar` / `sidebar`	Gắn dọc theo cạnh, hoặc nổi như một hòn đảo.
`intervals`	Các nút khung thời gian để nguyên, hoặc đặt trong một rãnh phân đoạn.
`tagRadius`	Góc bo của nhãn giá, nhãn trên trục và huy hiệu lệnh do biểu đồ vẽ.

Giá trị nào không dùng được (nằm ngoài khoảng cho phép, hoặc CSS có thể thoát khỏi khai báo của nó) sẽ bị bỏ qua và giữ giá trị của preset.

Font chữ

Widget không tải font nào: nó chỉ gọi tên, và trình duyệt lần lượt thử từng font trong danh sách. Studio dùng Manrope, rồi đến Inter; Terminal dùng IBM Plex Sans Condensed và IBM Plex Mono; Capsule dùng Sora. Hãy tự tải những font bạn muốn:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap">

Biến CSS

Các token là biến CSS trên phần tử gốc của widget (và trên các hộp thoại của nó). Khi không có tuỳ chọn ui, chúng vẫn thuộc về stylesheet — tức là của Studio — nên CSS của bạn có thể đặt chúng: widget đặt stylesheet của nó lên đầu trang, nên một quy tắc của bạn trên .tcw-root sẽ được ưu tiên. Khi có ui, widget ghi chúng thẳng lên phần tử, và chúng sẽ được ưu tiên.

.tcw-root {
  --tcw-radius: 4px;            /* the md corner: buttons and fields follow it */
  --tcw-dialog-radius: 12px;
  --tcw-control-h: 28px;
  --tcw-font: 'Inter', system-ui, sans-serif;
}

Biến	Lấy từ
`--tcw-radius-xs`, `-sm`, `--tcw-radius`, `-lg`, `-xl`	`radius`
`--tcw-control-radius`, `--tcw-input-radius`, `--tcw-menu-radius`, `--tcw-dialog-radius`, `--tcw-panel-radius`, `--tcw-tooltip-radius`, `--tcw-tag-radius`, `--tcw-toast-radius`, `--tcw-toolbar-radius`, `--tcw-sidebar-radius`	`components`
`--tcw-toolbar-h`, `--tcw-control-h`, `--tcw-control-h-sm`, `--tcw-icon`, `--tcw-sidebar-w`, `--tcw-menu-item-h`	`sizes`
`--tcw-font`, `--tcw-font-mono`, `--tcw-font-size` (và `-sm`, `-xs`, `-lg`), `--tcw-weight`, `--tcw-weight-strong`, `--tcw-label-case`, `--tcw-label-tracking`	`font`
`--tcw-border-w`, `--tcw-sep-w`	`borders`
`--tcw-menu-shadow`, `--tcw-dialog-shadow`, `--tcw-tooltip-shadow`	`shadows`
`--tcw-blur`, `--tcw-surface-opacity`	`blur`

Các công tắc bố cục là thuộc tính data trên cùng các phần tử đó, để bạn viết CSS riêng: data-tcw-ui (preset), data-tcw-active, data-tcw-toolbar, data-tcw-sidebar, data-tcw-intervals và data-tcw-separators (on / off).

Nhãn trên biểu đồ

Widget chuyển tagRadius cho biểu đồ của nó (hình dạng đặt trong chartOptions.shapes được giữ cho đến khi bạn gọi setUI). Với một Chart dùng riêng, hãy tự đặt hình dạng; thiết lập này được giữ nguyên khi đổi chủ đề màu. Nhãn giá, nhãn trên trục và nhãn của con trỏ chữ thập, nhãn lệnh, vị thế và lệnh bracket, cùng nhãn mức của kỳ trước đều theo hình dạng này.

const chart = new Chart(host, { shapes: { tagRadius: 4 } })
chart.setShapes({ tagRadius: 999 })   // pill price tags, axis pills and order badges
chart.getShapes()

Màu volume

Thanh volume lấy màu volumeUp và volumeDown của theme. volumeColor(candleColor) trả về màu nến với độ trong suốt của volume, nên trong theme của riêng bạn các thanh vẫn chỉ là nền phía sau nến. Widget tự làm việc này khi phần cài đặt đổi màu nến, và một theme dựa trên preset chỉ đổi candleUp / candleDown cũng có volume theo màu đó.

import { DARK_THEME, volumeColor } from '@tradecanvas/chart'

chart.setTheme({
  ...DARK_THEME,
  candleUp: '#26a17b',
  candleDown: '#e0525f',
  volumeUp: volumeColor('#26a17b'),
  volumeDown: volumeColor('#e0525f'),
})