フレームワークアダプター

Sixtyfoldのフレームワークパッケージは同じLineChartおよびStockChartエンジンの周りにある薄いライフサイクルアダプターです。これらはレンダリングロジックを重複させたり、データを再形成したり、ランタイムテレメトリを追加したり、すべてのチャートをアプリケーションに組み込んだりしません。

使用するエンジンとアダプターを1つインストールしてください。/lineまたは/stockのエントリポイントのみをインポートします。

pnpm add @sixtyfold/react@1 @sixtyfold/line@1

import { SixtyfoldLineChart } from "@sixtyfold/react/line";

react を vue、angular、svelte、または solid に置き換えてください。株価チャートには @sixtyfold/stock をインストールし、/stock をインポートしてください。チャートエンジンはアダプターのオプショナルなピア依存関係であるため、ラインチャートをインストールしても株価チャートはインストールされません。

共有アダプター契約

すべてのアダプターはコンポーネントのマウント後にチャートを作成し、initialize() を待機し、リアクティブ入力を適用し、アンマウント時に destroy() を呼び出します。これによりチャートWorkerが終了し、オブザーバー、リスナー、大きなバッファ参照が解放されます。SSR中はコンポーネントはキャンバスホストのみを出力するため、サーバーでチャートピクセルを描画する必要がある場合は @sixtyfold/ssr を使用してください。

各アダプターは、準備完了、構築およびプロップ取り付けエラー、レンダラーおよびオーバーレイのエラー、加えてレンダー統計を報告します。ラインアダプターはSeriesVisibilityChangeEventも報告します。各フレームワークは慣例的なrefまたはコンポーネントAPIを通じて基礎となるLineChartまたはStockChartインスタンスを公開するため、まれな命令的操作も引き続き利用可能です。

Readiness は初期 props が受理されたことを意味し、最初のキャンバスフレームが描画されたことを意味するものではありません。ready コールバック内で行われた命令的変更は、保留された初期 prop バッチによって上書きされません。

チャートの障害を処理する

アダプターのエラーフックは unknown を受け入れます。なぜなら JavaScript の構築エラーは特定のクラスを使用することを要求しないためです。Sixtyfold レンダラーから発生する故障は ChartRendererError のインスタンスです。オーバーレイ解決またはレンダラー配信の失敗は ChartOverlayError のインスタンスです。構造化されたフィールドを読む前に値の型を絞ってください：

import {
  ChartOverlayError,
  ChartRendererError,
} from "@sixtyfold/line";

export function reportChartError(error: unknown) {
  if (error instanceof ChartRendererError) {
    console.error(error.phase, error.message);
    return;
  }
  if (error instanceof ChartOverlayError) {
    console.error("Overlay sources failed:", error.sources);
    return;
  }
  console.error(error);
}

ストック専用アプリケーションでは @sixtyfold/stock から同じインポートを使用してください。error.phase は "initialization" または "runtime" のいずれかです。レンダラーの障害は当該チャートインスタンスを破壊します；アプリケーションが回復を選ぶ場合はアダプターを再マウントしてください。オーバーレイの障害は致命的ではありません：正常に取得された項目はそのままインストールされたままです；要求されたすべての項目が失敗した場合は、以前に描画されたオーバーレイが残ります。

拒否されたリアクティブプロップの設定はエラーを報告し、初期の ready 通知を保留します。再マウントせずに再試行するには訂正済みのプロップを渡してください。後のプロップが失敗した場合でも、既に正常に設定済みのデータは再度転送されません。この回復は、再マウントを必要とする回復不能なレンダラーエラーには適用されません。

バルクの型付き配列は Worker に転送されます。各データオブジェクトをワンショットとして扱ってください：インプレースで変更せず、各更新で新しいバッファを持つ新しいオブジェクトを割り当ててください。これにより数百万点規模のデータセットに対するゼロコピー経路が維持されます。

React

import { useMemo, useRef } from "react";
import {
  SixtyfoldLineChart,
  type LineChartHandle,
} from "@sixtyfold/react/line";

export function Signals() {
  const chartRef = useRef<LineChartHandle>(null);
  const data = useMemo(() => ({
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  }), []);

  return (
    <SixtyfoldLineChart
      ref={chartRef}
      data={data}
      aria-label="Signal history"
      onError={console.error}
    />
  );
}

コンポーネントは通常の canvas 属性を受け入れます。ref は ref.current?.chart を公開します。初期構築はマイクロタスクで遅延されるため、React Strict Mode の開発ライフサイクル検査が初期データを二重に転送することはありません。

React 19.2+ Activity はレンダラーを再作成したりデータを再転送したりせずにチャートを隠したり再表示したりできます。プロップの設定および準備完了／エラー通知は再表示まで待機し、統計とシリーズ可視性のコールバックは非表示中は切断されます。保持されたWorkerとバッファはコンポーネントが実際にアンマウントされたとき（非表示状態でのアンマウントを含む）に解放されます。

Reactは非表示中に転送されたrefを切断します。以前にキャプチャされたハンドルは再表示されるまでnullを.chartから返します。React 18およびそれ以前のReact 19リリースは、再サスペンドされたSuspense境界によって非表示になったチャートを含め、パッシブクリーンアップを通じてアンマウント時にチャートを破棄します。

Vue

<script setup lang="ts">
import { shallowRef } from "vue";
import { SixtyfoldLineChart } from "@sixtyfold/vue/line";

const data = shallowRef({
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
});
</script>

<template>
  <SixtyfoldLineChart
    :data="data"
    aria-label="Signal history"
    @error="console.error"
  />
</template>

大量データには Vue のディーププロキシではなく shallowRef または markRaw を使用してください。コンポーネントは ready、error、stats を発行します；折れ線チャートは seriesVisibilityChange も発行します。テンプレート ref はその浅い chart ref を公開します。

統計収集はリアクティブリスナーに従います。単独の @stats.once リスナーは最初のイベント後に収集を無効にします；通常の @stats リスナーは有効のままにします。消費された .once リスナーはそのコンポーネントのライフタイム中、消費済みのままです。

Angular

Angular 20〜22 パッケージは、スタンドアロンコンポーネントと Angular Package Format の二次エントリポイントを使用します。

import { Component } from "@angular/core";
import { SixtyfoldLineChartComponent } from "@sixtyfold/angular/line";

@Component({
  standalone: true,
  imports: [SixtyfoldLineChartComponent],
  template: `
    <sixtyfold-line-chart
      [data]="data"
      ariaLabel="Signal history"
      (chartError)="reportError($event)"
    />
  `,
})
export class Signals {
  data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };

  reportError(error: unknown) {
    console.error(error);
  }
}

入力は共有テーブルとアクセシビリティに重点を置いたフィールドおよび canvasAttributes に従います。出力は chartReady、chartError、stats で、ラインコンポーネントは seriesVisibilityChange も発行します。コンポーネント参照はその公開 chart を公開します。

統計収集は、アクティブな購読者が stats 出力を受信できる間のみ有効です。最後の購読者が購読解除した時点で（take(1) を含む）停止し、出力が完了、エラー、またはクローズされた場合にも停止します。

Angular のアプリケーションビルダーはパッケージ管理下の Vite Worker URL を変換しません。アプリケーションで使用するエンジンをビルドターゲットの assets 配列に angular.json に追加してください:

[
  { "glob": "**/*", "input": "node_modules/@sixtyfold/line/dist/assets", "output": "assets" },
  { "glob": "**/*", "input": "node_modules/@sixtyfold/stock/dist/assets", "output": "assets" }
]

チャートの構築は isPlatformBrowser で保護されているため、Angular の SSR はブラウザグローバルを変更しません。

Svelte

<script lang="ts">
  import LineChart from "@sixtyfold/svelte/line";

  const data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };
</script>

<LineChart
  {data}
  ariaLabel="Signal history"
  onError={console.error}
/>

chart は命令的アクセスのためにバインド可能です。追加のSvelteプロップは線グラフ用に onReady、onError、onStats、onSeriesVisibilityChange、および canvasClass、canvasStyle、ariaLabel です。

SolidJS

import { SixtyfoldLineChart } from "@sixtyfold/solid/line";

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
};

export function Signals() {
  return (
    <SixtyfoldLineChart
      data={data}
      canvasProps={{ "aria-label": "Signal history" }}
      chartRef={(chart) => console.log(chart)}
      onError={console.error}
    />
  );
}

chartRef はマウントされたチャートを受け取り、後にクリーンアップ中に null されます。canvasProps はネイティブの canvas 属性を渡します。他のすべての props は共有契約に従います。

完全な例

公開リポジトリには、サポートされている各フレームワーク向けの最小限のレスポンシブアプリケーションが含まれています。各アプリケーションは、⟦SF_packages⟧、データの形状、チャートのセットアップ、および両方のラインチャートとストックチャートを再現するために必要なクリーンアップを示します。