株価チャート

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 は、マーケット固有の解析レイヤーを備えた順序付きの始値・高値・安値・終値・出来高（OHLCV）列を描画します。その詳細度（LOD）プロセスは、表示されている多数のローソク足を有効なOHLCV期間に自動的に集約し、ズーム操作に応じてより細かいローソク足へ戻ります。

正確な構成とメソッドシグネチャは生成されたStock options、StockChart methods、およびOHLCV data typesのリファレンスに記載されています。

StockChart はライフサイクル、ビューポート、外観、オーバーレイ、レンダラー、およびバッチングの各メソッドを直接公開します。マーケットタイムモードでは、そのビューポートメソッドは圧縮された観測セッション座標を保持しつつ、公開される値は実際のタイムスタンプのままになります。

ローソク足と出来高

filled、hollow、またはohlcのローソク足ジオメトリを選択してください。candleColors は陽線・陰線のボディとウィックを制御します。出来高は独立した色、不透明度、およびペイン高さ比率を持ちます。

レンダラーはOHLCVツールチップとクロスヘアコールバックの表示精度の境界を制御します。アプリケーションが通貨、単位、小数、またはコンパクト表記の明示的指定を必要とする場合は、priceUnit および volumeUnit を指定してください。

ホスト管理の時間範囲

StockChart は時間範囲ボタンを作成したりスタイルを適用したりしません。ラベル、数、順序、レイアウト、およびコントロールのアクセシビリティはホストアプリケーションが所有します — またはまったくコントロールを描画しないことも可能です。

ボタンがエクスポートされた便利なプリセットのいずれかに対応する場合は、setTimeRange() を呼び出してください：1D、5D、1M、3M、6M、YTD、1Y、5Y、または ALL。読み込まれている履歴を超えるプリセットは、利用可能なデータにクランプされます。

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),
    );
  }
});

名前付きプリセットでない範囲については、通常のビューポートAPIを介して実際のタイムスタンプを送信してください：

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,
  });
});

market 時間スケールモードでは、公開ビューポート値は実際のタイムスタンプのままであり、チャートは内部でそれらを圧縮された観測セッション座標に変換します。コンストラクタのコールバックは onTimeRangeChange、onCrosshairMove、および onVisibleRangeChange を提供します。同じ状態変更に対して名前空間付きDOMイベント定数がエクスポートされます。

インジケーター

組み込みインジケーターは生のローソク足から計算され、レンダリングおよびクロスヘア値のためにアクティブな集約でサンプリングされます。

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" },
]);

純関数は @sixtyfold/stock/analytics から利用可能です：calculateSMA、calculateEMA、calculateBollingerBands、calculateVWAP、および computeStockIndicator。非有限のソース値はロールウィンドウを沈黙の補間するのではなく破壊します。

マーケットレイヤー

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" },
]);

ボリュームプロファイルは価格ごとの推定ボリュームヒストグラムであり、取引ごとのオーダーフロー再構築ではありません。表示されている価格スケールを行に分割し、各OHLCVキャンドルの出来高をそのキャンドルの報告された安値から高値の範囲内に均等に配分します。横に長いバーはある価格帯周辺の推定出来高が多いことを示します。強気・弱気の部分はキャンドルの方向を用い、コントロールポイントは最も推定出来高の多い行を示し、バリューエリアは隣接する行へと広がり、表示されている出来高の設定された割合を含むまで拡張されます。

プロファイルは表示中の時間および価格の範囲に従います。長い範囲では計算が4,096ソースキャンドル以下に収まる最も細かい完了済みキャンドル集約を使用し、ズームインした範囲では生のキャンドルを使用します。これにより操作負荷を抑えますが、いずれの経路もOHLCVデータが各キャンドルの範囲内で個々の取引がどこで発生したかを報告しないため、キャンドルに基づく近似のままです。このレイヤーを正確な価格ごとの取引、フットプリント、またはオーダーフローデータと記述しないでください。

プライスラインはデータに結び付けられた水平レベルです。マーカーはタイムスタンプ順にソートされ、表示範囲に合わせて間引かれます；1キャンドルごとにマーカーを置くのではなく稀なイベントを使用してください。

ストリーミング

initialize()の後、正の整数容量でストリームを作成してください:

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

ストリーミングのタイムスタンプは有限かつ厳密に増加していなければなりません。これには呼び出し間、キューに入ったスカラーキャンドル、およびチャンク境界をまたぐ場合も含まれます。同じタイムスタンプでの追加は既存のキャンドルを更新しないため、まずフィードを重複除去してください。

カラム型フィードでは、六つの等サイズのOHLCV列を持つaddCandlesまたはaddCandleBatchesを使用してください。addCandleBatchesは転送前にチャンクリスト全体を検証します。タイムスタンプ順の不正、非有限のタイムスタンプ、または長さ不一致は、キュー内のキャンドルをフラッシュしたり呼び出し元バッファを切り離したりすることなく拒否されます。有効なスカラーおよびバルク呼び出しは順序を保持します。Workerモードでは有効なバッファが転送されるため、アプリケーションで必要な値は追加する前に取得してください。

initialTimeRangeは、意図したビューポートが表示される前に全域フレームを発生させずに、初期転送バッチと同じレンダラーターンで適用できます。マーケットタイムのビューポートは、新しい足（キャンドル）が推定テンポを変更してもタイムスタンプアンカーを保持します。

静的なsetDataは別の並び順契約を持ちます：単調増加または単調減少の履歴（同一タイムスタンプを含む）を受け入れ、昇順に正規化されます。データの置換やストリーミングのリセットは保留中のサンプルを破棄し、古いデータセットのビューポートアニメーションをキャンセルします。

ストリーミング集約階層はオフスクリーンでスナップショットから再構築され、アクティブな階層をアトミックに置き換えます。完了したレベルは追加入力が続いている間も使用可能であり、チャートは部分的に構築中の置換を公開しません。

CSVを読み込み中

loadOHLCVFromCSV は、オプションの進捗コールバック付きでブラウザ内の単純なデータセット向けに提供されます。非常に大きな Parquet や独自形式のフィードの場合は、UI のスレッド外でデコードし、検証済みの 6 つの型付け列を直接転送してください。