JavaScript-Handelssteuerelemente

StockSharp JS-Handelssteuerelemente ist eine Sammlung von Browserpanels für ein Handelsterminal. Das Paket ist als @stocksharp/trading-controls auf npm veröffentlicht; alle Steuerelemente können in der Online-Demo betrachtet werden.

Handelsoberfläche mit Handelsstrom, Orderbuch, Instrumentenliste, Auftragseingabe und Tabellen

Die Abbildung zeigt außerdem ein Kerzendiagramm aus dem separaten Paket @stocksharp/chart. @stocksharp/trading-controls enthält sieben eigenständige Steuerelemente:

Steuerelement	Klasse	Kennung
Aktive Aufträge	`ActiveOrdersWidget`	`activeOrders`
Positionen	`PositionsWidget`	`positions`
Ausführungshistorie	`TradeHistoryWidget`	`tradeHistory`
Instrumentenliste	`WatchlistWidget`	`watchlist`
Auftragseingabe	`OrderEntryWidget`	`orderEntry`
Orderbuch	`OrderBookWidget`	`orderbook`
Handelsstrom	`TradeFeedWidget`	`tradefeed`

Die Kennungswerte sind über das exportierte Objekt ControlTypes verfügbar.

Installation

npm install @stocksharp/trading-controls

Die Basisstile sind erforderlich. Die fertige helle und dunkle Farbpalette kann zusätzlich eingebunden oder durch eigene CSS-Variablen --t-* ersetzt werden:

import '@stocksharp/trading-controls/styles.css';
import '@stocksharp/trading-controls/theme.css'; // Optional: vorgefertigtes Theme.

Die Steuerelemente verwenden Klassen von Bootstrap Icons, liefern die Schriftarten und SVG-Dateien jedoch nicht selbst mit. Die Hostseite muss die Symbole separat einbinden.

Für Seiten ohne Bundler ist die Datei dist/sstradingcontrols.js vorgesehen, die das globale Objekt window.SSTradingControls erzeugt.

Gemeinsames Erstellungsschema

Jedes Steuerelement wird mit der statischen Methode create erstellt. Die Methode prüft den Host, erzeugt das eigene DOM und fügt das Wurzelelement in den übergebenen Container ein:

import {
  PositionsWidget,
  type TradingHost,
} from '@stocksharp/trading-controls';

declare const host: TradingHost;

const positions = PositionsWidget.create(
  document.querySelector<HTMLElement>('#positions')!,
  {},
  {
    host,
    closePosition: (portfolioId, instrumentId, symbol) =>
      console.log('schließen', portfolioId, instrumentId, symbol),
    reversePosition: (portfolioId, instrumentId, symbol) =>
      console.log('umkehren', portfolioId, instrumentId, symbol),
    refreshPositions: () => console.log('aktualisieren'),
  },
);

positions.update([]);

Das zweite Argument ist der gespeicherte Zustand der Instanz. Die Abhängigkeiten im dritten Argument unterscheiden sich je nach Steuerelement: Das Positionspanel erhält beispielsweise Handler zum Schließen und Umkehren, während das Orderbuch Handler für die Auswahl und Ausführung eines Preises erhält.

TradingHost-Vertrag

Die Steuerelemente greifen nicht direkt auf globale Übersetzungsfunktionen, Einstellungspeicher, Handelsverbindungen oder Fenstermanager zu. Jede externe Interaktion läuft über ein einziges Objekt TradingHost.

Hostelement	Zweck
`isPrimary`	Kennzeichnet die primäre Instanz eines Steuerelements auf der Seite.
`t(key, ...args)`	Übersetzt sichtbaren Text und setzt Argumente ein.
`presentation`	Formatiert Seite, Typ und Status eines Auftrags sowie Gewinnklassen und die Canvas-Palette.
`preferences`, `cache`	Speichern dauerhafte Einstellungen und temporäre Daten.
`trading.api`	Sucht Instrumente und lädt Ausführungen.
`trading.marketData`	Verwaltet Abonnements und stellt aktive Aufträge bereit.
`trading.portfolioId()`	Gibt das aktuelle Portfolio zurück.
`trading.pickInstrument(...)`	Öffnet die Instrumentenauswahl.
`ticker`	Empfängt sichtbare Instrumente und deren Kurse.
`allow(action)`	Prüft die Berechtigung für eine Aktion.
`close`, `spawn`, `persistState`, `saveLayout`	Verwalten Lebenszyklus und Zustand des Panels.
`register`, `unregister`, `broadcast`	Registrieren Instanzen und verteilen Änderungen zwischen ihnen.
`log(message)`	Empfängt Diagnosemeldungen.

Alle Elemente sind erforderlich. assertHost prüft verschachtelte Funktionen, bevor das Steuerelement gerendert wird, und meldet den genauen fehlenden Pfad. Wenn eine Anwendung einen Teil der Funktionen nicht benötigt, können für Pflichtbefehle sinnvolle Platzhalter übergeben werden, etwa log: console.warn oder ein leeres saveLayout.

Lokalisierung und Gestaltung

Sichtbaren Text beziehen die Steuerelemente ausschließlich über host.t. Die vollständige aktuelle Liste mit 153 Schlüsseln wird als @stocksharp/trading-controls/translation-keys.json ausgeliefert. Ein unbekannter Schlüssel wird dem Benutzer unverändert angezeigt; deshalb muss der Host Übersetzungen für die gesamte Liste definieren.

Die Datei styles.css enthält Regeln, bezieht Farben, Schriftarten und Abmessungen jedoch aus den CSS-Variablen --t-*. Wenn das fertige theme.css nicht verwendet wird, muss die Anwendung diese Variablen definieren. Die Canvas-Farben für Orderbuch und Bubble-Tape liefert host.presentation.canvasPalette().

Ressourcen freigeben

Rufen Sie beim Entfernen eines Panels dispose() auf. Die Methode entfernt Handler, deaktiviert bei Bedarf Beobachter und Abonnements des jeweiligen Steuerelements und ruft anschließend host.unregister auf.

positions.dispose();

Aus dem Quellcode erstellen

git clone https://github.com/StockSharp/JS-TradingControls.git
cd JS-TradingControls
npm install
npm test
npm run build