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 representa colunas ordenadas de open, high, low, close e volume (OHLCV) com camadas analíticas específicas de mercado. O seu processo de nível de detalhe (LOD) combina automaticamente muitas velas visíveis em períodos OHLCV válidos e depois regressa a velas mais finas à medida que amplia.

A configuração exata e as assinaturas de métodos estão no Stock options, StockChart methods, e na referência de OHLCV data types.

StockChart expõe métodos de ciclo de vida, viewport, aparência, sobreposição, renderer e batching diretamente. No modo market-time, os seus métodos de viewport preservam coordenadas de sessão observada comprimidas 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 baixa. O volume tem cores, opacidade e rácio de altura do painel independentes.

Os limites do renderer exibem a precisã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 formato compacto.

Intervalos de tempo geridos pelo host

StockChart não cria nem estiliza botões de intervalo. A aplicação host possui as etiquetas, número, ordem, layout e acessibilidade dos seus controlos — ou pode não renderizar controlos nenhuns.

Chame setTimeRange() quando um botão corresponder a um dos presets de conveniência exportados: 1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y, ou ALL. Um preset que se estenda além do histórico carregado é limitado 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 um preset nomeado, envie timestamps reais através da API ordinária 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 do viewport permanecem timestamps reais; o gráfico converte-os internamente para coordenadas de sessão observada comprimidas. Os callbacks do construtor fornecem onTimeRangeChange, onCrosshairMove e onVisibleRangeChange. Constantes de eventos DOM namespaced são exportadas para as mesmas alterações de estado.

Indicadores

Os indicadores integrados são calculados a partir de velas brutas 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 quebram uma janela deslizante em vez de serem silenciosamente interpolados.

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 profile de volume é um histograma estimado de volume-por-preço, não uma reconstrução de fluxo de ordens por transação. Divide a escala de preço visível em linhas e distribui o volume de cada vela OHLCV uniformemente através do intervalo low-to-high reportado dessa vela. Barras horizontais mais largas representam mais volume estimado em torno de um preço. Porções de alta e baixa baseiam-se na direcção da vela, o ponto de controlo marca a linha com maior volume estimado, e a área de valor expande-se através de linhas adjacentes até conter a percentagem configurada do volume visível.

O profile segue o intervalo de tempo e preço visíveis. Intervalos longos usam a agregação de vela concluída mais fina que mantém o cálculo em ou abaixo de 4 096 velas de origem; intervalos ampliados usam velas brutas. Isto mantém a interacção limitada, mas ambos os caminhos continuam aproximações derivadas de velas porque os dados OHLCV não indicam onde dentro do intervalo de cada vela ocorreram transacções individuais. Não descreva esta camada como transacções-exatas-por-preço, footprint ou dados de fluxo de ordens.

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

Streaming

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

Para feeds colunares, use addCandles ou addCandleBatches. initialTimeRange pode ser aplicado no mesmo ciclo do renderer que um lote inicial transferido, evitando um frame de intervalo completo antes de o viewport pretendido aparecer.

Hierarquias de agregação em streaming são reconstruídas fora de ecrã e substituem a hierarquia activa atomica­mente. A hierarquia anterior permanece visível até que a substituição esteja pronta.

Carregamento de CSV

loadOHLCVFromCSV é fornecido para conjuntos de dados simples no browser, com um callback de progresso opcional. Para Parquet muito grandes ou feeds proprietários, decodifique fora do thread da UI e transfira seis colunas tipadas validadas directamente.