Gráficos de ações

import { StockChart, type TimeRange } from "@sixtyfold/stock";

const data = {
  timestamp: new Float64Array([0, 60_000, 120_000, 180_000]),
  open: new Float64Array([100, 102, 101, 104]),
  high: new Float64Array([103, 104, 105, 107]),
  low: new Float64Array([99, 100, 100, 103]),
  close: new Float64Array([102, 101, 104, 106]),
  volume: new Float64Array([420, 510, 470, 630]),
  length: 4,
};

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new StockChart(canvas, {
  renderMode: "auto",
  timeScale: "market",
  showVolume: true,
  priceUnit: { prefix: "$", decimals: 2 },
});

await chart.initialize();
chart.setData(data);

// The application owns the controls: choose any labels and ranges, or none.
const controls = document.querySelector("#stock-ranges")!;
for (const range of ["1D", "1M", "ALL"] as const satisfies readonly TimeRange[]) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}


window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock renderiza colunas ordenadas de abertura, máxima, mínima, fecho e volume (OHLCV) com camadas analíticas específicas do mercado. O seu processo de nível de detalhe (LOD) combina automaticamente várias velas visíveis em períodos OHLCV válidos e depois regressa a velas mais finas quando amplia.

A configuração exacta e as assinaturas de método encontram-se nas Stock options geradas, nos métodos StockChart e na referência de tipos de dados OHLCV.

StockChart expõe diretamente métodos de ciclo de vida, viewport, aparência, sobreposição, renderer e batching. Em modo market-time, os seus métodos de viewport preservam coordenadas observadas comprimidas da sessão enquanto os valores públicos permanecem timestamps reais.

Velas e volume

Escolha a geometria de vela filled, hollow ou ohlc. candleColors controla os corpos e pavios de alta e de baixa. O volume tem cores, opacidade e razão de altura de painel independentes.

O renderer define a precisão de visualização para tooltips OHLCV e callbacks do crosshair. Forneça priceUnit e volumeUnit quando a aplicação exigir formatação explícita de moeda, unidade, decimais ou compacta.

Intervalos de tempo geridos pelo anfitrião

StockChart não cria nem estiliza botões de intervalo de tempo. A aplicação anfitriã é proprietária das legendas, quantidade, ordem, disposição e acessibilidade dos seus controlos — ou pode não renderizar quaisquer controlos.

Invoque setTimeRange() quando um botão corresponder a um dos predefinidos de conveniência exportados: 1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y ou ALL. Uma predefinição que se prolongue para além do historial carregado é limitada aos dados disponíveis.

const controls = document.querySelector<HTMLElement>("[data-stock-ranges]")!;
const ranges = [
  ["Day", "1D"],
  ["Six months", "6M"],
  ["Everything", "ALL"],
] as const;

for (const [label, range] of ranges) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = label;
  button.dataset.range = range;
  button.addEventListener("click", () => chart.setTimeRange(range));
  controls.append(button);
}

canvas.addEventListener("sixtyfold:time-range-change", (event) => {
  const detail = (event as CustomEvent).detail;
  for (const button of controls.querySelectorAll("button")) {
    button.setAttribute(
      "aria-pressed",
      String(button.dataset.range === detail.range),
    );
  }
});

Para um intervalo que não seja uma predefinição nomeada, envie carimbos de hora reais através da API normal de viewport:

const twoWeeks = 14 * 24 * 60 * 60_000;
let latestDataTimestamp = 0;

const chart = new StockChart(canvas, {
  onVisibleRangeChange({ dataBounds }) {
    latestDataTimestamp = dataBounds.xMax;
  },
});

customButton.addEventListener("click", () => {
  chart.setViewport({
    xMin: latestDataTimestamp - twoWeeks,
    xMax: latestDataTimestamp,
  });
});

No modo de escala temporal market, os valores públicos da viewport continuam a ser carimbos temporais reais; o gráfico converte‑os internamente em coordenadas comprimidas de sessão observada. As callbacks do construtor fornecem onTimeRangeChange, onCrosshairMove e onVisibleRangeChange. Constantes de evento DOM com namespace são exportadas para as mesmas alterações de estado.

Indicadores

Os indicadores integrados são calculados a partir de candles brutos e amostrados na agregação ativa para renderização e valores do crosshair.

chart.setIndicators([
  { type: "sma", id: "sma-20", period: 20, color: "#ffd166" },
  { type: "ema", id: "ema-50", period: 50, color: "#64d8ff" },
  { type: "bollinger", id: "bb-20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", reset: "day" },
]);

Funções puras estão disponíveis em @sixtyfold/stock/analytics: calculateSMA, calculateEMA, calculateBollingerBands, calculateVWAP e computeStockIndicator. Valores de origem não finitos interrompem uma janela deslizante em vez de serem interpolados silenciosamente.

Camadas de mercado

chart.setVolumeProfile({ rows: 48, placement: "right", valueAreaPercent: 70 });
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "Entry", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "earnings", timestamp, position: "above", shape: "diamond", label: "E" },
]);

O perfil de volume é um histograma de volume-por-preço estimado, não uma reconstrução trade-a-trade do fluxo de ordens. Divide a escala de preços visível em linhas e distribui o volume de cada vela OHLCV uniformemente pela faixa low‑to‑high reportada dessa vela. Barras horizontais mais largas representam mais volume estimado em torno de um preço. As partes bullish e bearish usam a direção da vela, o ponto de controlo marca a linha com maior volume estimado, e a área de valor expande-se através das linhas adjacentes até conter a percentagem configurada do volume visível.

O perfil segue o intervalo de tempo e preço visíveis. Intervalos longos usam a agregação de velas concluídas mais fina que mantém o cálculo em ou abaixo de 4.096 velas de origem; intervalos com zoom usam velas brutas. Isto mantém a interação limitada, mas ambos os caminhos continuam aproximações derivadas de velas porque os dados OHLCV não reportam onde, dentro da faixa de cada vela, ocorreram trades individuais. Não descreva esta camada como trades-exatos-por-preço, footprint ou dados de fluxo de ordens.

Linhas de preço são níveis horizontais ancorados em dados. Marcadores são ordenados por timestamp e reduzidos ao intervalo visível; use eventos esparsos em vez de um marcador por vela.

Streaming

Depois de initialize(), crie um stream com uma capacidade inteira positiva:

chart.initStreaming(250_000);
chart.addCandle(timestamp, open, high, low, close, volume);

Os carimbos de data/hora em streaming devem ser finitos e estritamente crescentes, inclusive entre chamadas, velas escalares enfileiradas e limites de fragmentos. Um append com o mesmo carimbo de data/hora não atualiza uma vela existente; deduplicate o feed primeiro.

Para feeds colunares, utilize addCandles ou addCandleBatches com seis colunas OHLCV de igual tamanho. addCandleBatches valida a lista completa de fragmentos antes de qualquer transferência. Ordem inválida de carimbos, carimbos não finitos ou comprimentos desiguais são rejeitados sem limpar velas enfileiradas nem desalojar buffers do chamador. Chamadas escalares e em massa válidas mantêm a sua ordem. Em modo worker, são transferidos buffers válidos, por isso capture os valores necessários pela aplicação antes de fazer append.

initialTimeRange pode ser aplicado na mesma iteração do renderer como um lote inicial transferido, evitando um frame de alcance total antes de o viewport pretendido aparecer. Viewports em tempo de mercado mantêm as suas âncoras de timestamp quando novas candles alteram a cadência inferida.

Estática setData tem um contrato de ordenação diferente: aceita histórico monotonicamente ascendente ou descendente, incluindo timestamps iguais, e normaliza para ordem ascendente. Substituir dados ou reiniciar streaming descarta amostras pendentes e cancela a animação do viewport do conjunto de dados anterior.

Hierarquias de agregação de streaming são reconstruídas a partir de snapshots fora do ecrã e substituem a hierarquia activa de forma atómica. Níveis concluídos permanecem utilizáveis enquanto as adições continuam; o gráfico não publica substituições parcialmente construídas.

A carregar CSV

loadOHLCVFromCSV está disponível para conjuntos de dados simples no browser, com um callback de progresso opcional. Para feeds muito grandes em Parquet ou proprietários, faça a decodificação fora do thread principal e transfira seis colunas tipadas validadas diretamente.