Fluxo de negócios
TradeFeedWidget apresenta negócios públicos do mercado e execuções da carteira atual. O fluxo do mercado pode alternar entre uma tabela e um gráfico de bolhas.
Criação e fluxo de dados
import {
TradeFeedWidget,
type TradingHost,
} from '@stocksharp/trading-controls';
declare const host: TradingHost;
const feed = TradeFeedWidget.create(
document.querySelector<HTMLElement>('#trade-feed')!,
{},
{ host },
);
feed.setActiveSymbol('BTC@IMEX');
feed.setTrades([{
symbol: 'BTC@IMEX',
side: 0,
price: 68_420.5,
quantity: 0.25,
time: new Date().toISOString(),
}]);
feed.addTrade({
symbol: 'BTC@IMEX',
side: 1,
price: 68_419.9,
quantity: 0.4,
time: new Date().toISOString(),
});
setTrades substitui o conjunto original e addTrade adiciona uma execução em tempo real. O componente conserva no máximo 50 linhas da tabela e os 500 últimos registos para o gráfico.
Gráfico de bolhas
No gráfico, o eixo horizontal representa o tempo, o vertical representa o preço, o raio da bolha representa o volume e a cor representa a direção do negócio. Ao combinar registos adjacentes, a descrição emergente apresenta o VWAP, o volume total e o número de negócios. Um negócio é considerado grande se o respetivo volume exceder em mais do dobro a média móvel.
As cores do canvas provêm de host.presentation.canvasPalette(). O modo selecionado é guardado em host.preferences sob uma chave comum à página.
Instrumentos adicionais
Além do símbolo ativo, o painel pode fixar outros:
await feed.addExtraSymbol('ETH@IMEX');
console.log(feed.getExtraSymbols());
await feed.removeExtraSymbol('ETH@IMEX');
São criadas para estes instrumentos subscrições do nível MarketDataLevels.Tape e, no gráfico de bolhas, faixas separadas com as suas próprias escalas de preços. A lista de instrumentos adicionais é guardada no estado da instância específica e pode ser fornecida durante a criação como { extras: ['ETH@IMEX'] }.
Negócios próprios
O segundo separador apresenta as execuções da carteira. O carregamento pode ser chamado explicitamente:
await feed.loadMyTrades(host.trading.portfolioId(), 'BTC@IMEX');
O método chama host.trading.api.getExecutions. O restante fluxo do mercado é sempre fornecido externamente ao controlo, para que vários painéis possam utilizar uma só ligação.
Métodos públicos
setActiveSymbol(symbol)— definir o instrumento principal.setTrades(...),addTrade(...)— substituir ou complementar o fluxo do mercado.loadMyTrades(portfolioId, symbol)— carregar as execuções próprias.addExtraSymbol,removeExtraSymbol,getExtraSymbols— gerir os instrumentos fixos.dispose()— eliminar as subscrições e libertar os recursos.