@storm-trade/chart-core

Framework-agnostic primitives for embedding TradingView Charting Library in Tsunami Exchange products. The package owns the chart engine concerns (widget lifecycle, datafeed plumbing, line/marker rendering, timezone handling) and stays deliberately ignorant of:

• application stores (zustand, redux, …)
• domain types (OrderV2, Position, …)
• network transport (msgpack websocket, REST, …)
• create-order UX

All app glue is supplied by the consumer through interfaces.

Status

0.x. Implemented:

• useTradingView — widget lifecycle, theming, persistence (with sanitizeChartState), symbol switching, header badge, options dropdown, plus-click, timezone, on-chart marks lifecycle (refreshMarks) and stale-data refresh.
• useOrderLines — draggable chart.createOrderLine with move / live-drag (onMoving) / cancel.
• usePriceLines — static horizontal lines via chart.createShape.
• createDatafeed — adapter from ChartDatafeed to TradingView's IBasicDataFeed (incl. getMarks).
• chartTimezone / customTimezones, bucketing, sanitizeChartState, chartPseudoFullscreen utilities.
• <PriceProviderBadge /> — header badge component.

Trade layer (src/trade/*, opt-in)

A Storm-specific layer for rendering orders/positions on the chart: ChartOrderManager (SL/TP with live PnL on drag, draggable limit triggers, liquidation/entry lines), buildOrderLineModels / buildPositionLines, calculateOrderPnL, and the OrderType taxonomy. It stays framework-agnostic by injecting the host's store data, trading-service actions and number formatting through ChartTradeProvider — chart-core pulls in no store, services, i18n or math libs.

The inline create-order popover (CreateOrderPopover, plus-click driven — order-type select, SL/TP vs limit branch, leverage, live PnL, submit-by-price) is a dependency-light plain-React rebuild of upscale-ui's form; the submit, balance, leverage bounds and confirm-modal routing inject via ChartCreateOrderProvider. For precise integration it exposes on* lifecycle hooks — onOrderTypeChange, onValuesChange, validate, onValidationError, onSubmitSuccess, onSubmitError — and is fully themeable via tokens plus per-slot className / style (CreateOrderSlot). The heavy confirm modals stay host-side — they reuse the app's main OpenPositionForm / SLTP form, which can't be vendored here.

Storybook demo

A runnable example lives in stories/ — it wires useTradingView + usePriceLines + useOrderLines against a synthetic offline datafeed and the real TradingView widget.

The library is proprietary and not vendored here, so the demo copies it from a sibling tsunami-ui checkout (gitignored):

pnpm copy-tv          # or TSUNAMI_UI_DIR=/path/to/tsunami-ui pnpm copy-tv
pnpm storybook        # http://localhost:6006  (runs copy-tv first)

Peer dependencies

| Peer | Why | |---|---| | react | Hooks need a React renderer. | | TradingView Charting Library | Proprietary, supplied by the host app. We do not ship the library or its types. The consumer aliases TradingView types via tsconfig paths (see below). |

TradingView types

The TradingView Charting Library is not redistributable. Until we publish a private types-only package, chart-core defines a minimal surface in src/external/charting-library.ts. Where the surface differs from your local TV bundle, structural typing should still match because we only use documented public methods.

If you hit a type error from a missing TV symbol, add it to src/external/charting-library.ts rather than import-ing from the host app's local copy.

Design boundary

┌────────────────── consuming app ──────────────────┐
│                                                   │
│  store, services, domain types, websocket         │
│             │                  │                  │
│             ▼                  ▼                  │
│       ChartDatafeed     OrderLineModel[]          │
│             │                  │                  │
└─────────────┼──────────────────┼──────────────────┘
              ▼                  ▼
        ┌─────────────────────────────┐
        │   @storm-trade/        │
        │        chart-core           │
        │  (TV widget, lines, marks)  │
        └─────────────────────────────┘

See the root README.md for publishing workflow.