Framework‑Adapter

Sixtyfolds Framework‑Pakete sind schlanke Lifecycle‑Adapter um dieselben LineChart und StockChart Engines. Sie duplizieren keine Render‑Logik, verändern keine Datenformate, fügen keine Laufzeit‑Telemetry hinzu und ziehen nicht jedes Diagramm in Ihre Anwendung.

Installieren Sie einen Adapter plus die Engine, die Sie verwenden. Importieren Sie nur dessen /line oder /stock Einstiegspunkt:

pnpm add @sixtyfold/react@next @sixtyfold/line@next

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

Ersetze react durch vue, angular, svelte oder solid. Für ein Aktienchart installiere @sixtyfold/stock und importiere /stock. Chart‑Engines sind optionale Peer‑Dependencies des Adapters; das Installieren eines Liniencharts installiert daher kein Stock.

Geteilter Adaptervertrag

Alle Adapter erstellen das Chart nach dem Mounten der Komponente, warten auf initialize(), wenden reaktive Inputs an und rufen destroy() beim Unmount auf. Dies beendet auch einen Chart‑Worker und gibt Observer, Listener und große Buffer‑Referenzen frei. Während SSR gibt die Komponente nur ihren Canvas‑Host aus; verwende @sixtyfold/ssr, wenn der Server Chart‑Pixel rendern muss.

Jeder Adapter meldet Bereitschaft, Konstruktions-, Renderer- und Overlay-Fehler sowie Render-Statistiken. Linien-Adapter melden zusätzlich SeriesVisibilityChangeEvent. Jedes Framework stellt die zugrunde liegende LineChart oder StockChart-Instanz über seine konventionelle Ref- oder Komponenten-API zur Verfügung, sodass seltene imperative Operationen weiterhin möglich bleiben.

Mit Chart-Fehlern umgehen

Adapter-Fehler-Hooks akzeptieren unknown, da JavaScript Konstruktionsfehler nicht verlangen, eine bestimmte Klasse zu verwenden. Vom Sixtyfold-Renderer emittierte Fehler sind Instanzen von ChartRendererError. Fehler bei der Overlay-Auflösung oder Renderer-Übermittlung sind Instanzen von ChartOverlayError. Engen Sie den Wert ein, bevor Sie strukturierte Felder lesen:

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

Verwenden Sie denselben Import aus @sixtyfold/stock in einer reinen Stock-Anwendung. error.phase ist entweder "initialization" oder "runtime". Ein Renderer-Fehler zerstört die jeweilige Chart-Instanz; remounten Sie den Adapter, wenn die Anwendung eine Wiederherstellung wählt. Ein Overlay-Fehler ist nicht fatal: Erfolgreiche Elemente bleiben installiert; schlagen alle angeforderten Elemente fehl, bleibt das zuvor gerenderte Overlay erhalten.

Bulk-typisierte Arrays werden an den Worker übertragen. Behandeln Sie jedes Datenobjekt als Einmalobjekt: verändern Sie es nicht in-place und weisen Sie für jedes Update ein neues Objekt mit neuen Buffern zu. Das bewahrt den Zero-Copy-Pfad für Datensätze mit mehreren Millionen Punkten.

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

Die Komponente akzeptiert normale Canvas-Attribute. Ihr Ref gibt ref.current?.chart frei. Die anfängliche Konstruktion wird mikrotask-verzögert durchgeführt, sodass die Entwicklungslebenszyklusprüfung von React Strict Mode die Anfangsdaten nicht zweimal übertragen kann.

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>

Verwenden Sie shallowRef oder markRaw für große Datenmengen statt Vue‑Deep‑Proxies. Die Komponente emittiert ready, error und stats; Liniendiagramme emittieren zusätzlich seriesVisibilityChange. Eine Template‑Ref gibt ihre flache chart‑Ref frei.

Angular

Das Angular‑20–22‑Paket verwendet Standalone‑Komponenten und sekundäre Einstiegspunkte im 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);
  }
}

Eingaben folgen der gemeinsamen Tabelle plus fokussierten Zugänglichkeitsfeldern und canvasAttributes. Ausgaben sind chartReady, chartError und stats; die Linienkomponente emittiert außerdem seriesVisibilityChange. Eine Komponentenreferenz gibt ihr öffentliches chart frei.

Der Angular‑Application‑Builder transformiert paket‑eigene Vite‑Worker‑URLs nicht. Fügen Sie die vom Application verwendeten Engines dem Array assets der Build‑Target‑Konfiguration in angular.json hinzu:

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

Der Chart‑Aufbau ist durch isPlatformBrowser geschützt, sodass Angular‑SSR Browser‑Globals nicht anfasst.

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 ist für imperativen Zugriff bindbar. Weitere Svelte-Props sind onReady, onError, onStats, onSeriesVisibilityChange für Liniendiagramme, canvasClass, canvasStyle und 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 empfängt das montierte Diagramm und null später während der Aufräumphase. canvasProps übergibt native Canvas-Attribute. Alle anderen Props folgen dem gemeinsamen Vertrag.

Vollständige Beispiele

Das öffentliche Repository enthält für jedes unterstützte Framework eine minimale, responsive Anwendung. Jede Anwendung zeigt die Pakete, die Datenstruktur, die Chart-Konfiguration und die notwendigen Aufräumarbeiten, um sowohl ein Linien- als auch ein Aktienchart zu reproduzieren.