Framework‑Adapter

Die Framework‑Pakete von Sixtyfold sind schlanke Lifecycle‑Adapter um dieselben LineChart und StockChart Engines. Sie duplizieren keine Rendering‑Logik, formen Daten nicht um, fügen keine Laufzeit‑Telemetrie hinzu und ziehen nicht jede Darstellung 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@1 @sixtyfold/line@1

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

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

Geteilter Adapter‑Vertrag

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

Jeder Adapter meldet Bereitschaft, Konstruktions- und Prop-Installationsfehler, Renderer- und Overlay-Fehler sowie Renderstatistiken. Linienadapter melden zudem SeriesVisibilityChangeEvent. Jedes Framework stellt die zugrundeliegende LineChart oder StockChart-Instanz über seine konventionelle Ref- oder Komponenten-API bereit, sodass unübliche imperative Operationen weiterhin verfügbar bleiben.

Readiness bedeutet, dass die initialen Props akzeptiert wurden, nicht dass ihr erster Canvas-Frame gemalt wurde. Imperative Änderungen, die im ready-Callback vorgenommen werden, werden von einem verzögerten initialen Prop-Batch nicht überschrieben.

Fehlerbehandlung bei Charts

Adapter-Error-Hooks akzeptieren unknown, weil JavaScript Konstruktionsfehler nicht verpflichtend eine bestimmte Klasse verwenden. Von dem Sixtyfold-Renderer emittierte Fehler sind Instanzen von ChartRendererError. Overlay-Auflösungs- oder Renderer-Delivery-Fehler sind Instanzen von ChartOverlayError. Präzisieren Sie den Wert, 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);
}

Importieren Sie dieselbe Quelle aus @sixtyfold/stock in einer reinen Stock-Anwendung. error.phase ist entweder "initialization" oder "runtime". Ein Renderer-Fehler zerstört jene Chart-Instanz; remounten Sie den Adapter, falls die Anwendung sich für eine Wiederherstellung entscheidet. Ein Overlay-Fehler ist nicht fatal: erfolgreiche Items bleiben installiert; falls jedes angeforderte Item fehlschlägt, bleibt das zuvor gerenderte Overlay bestehen.

Eine abgelehnte reaktive Prop-Installation meldet einen Fehler und verweigert die anfängliche Bereitschaftsbenachrichtigung. Liefern Sie korrigierte Props nach, um ohne Remount neu zu versuchen. Bereits erfolgreich installierte Daten werden nicht erneut übertragen, wenn eine spätere Prop fehlschlägt. Diese Wiederherstellung gilt nicht für terminale Renderer-Fehler.

Massenhaft typisierte Arrays werden an den Worker übertragen. Behandeln Sie jedes Datenobjekt als Einmalwert: mutieren Sie es nicht in-place, und weisen Sie für jedes Update ein neues Objekt mit neuen Puffern zu. Dies 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 legt ref.current?.chart frei. Die anfängliche Konstruktion ist microtask-verzögert, sodass die Entwicklungslebenszyklus-Prüfung von React Strict Mode die Initialdaten nicht zweimal überträgt.

React 19.2+ Activity kann ein Diagramm verbergen und wieder anzeigen, ohne seinen Renderer neu zu erstellen oder Daten erneut zu übertragen. Props-Installation sowie Bereitschafts-/Fehlerbenachrichtigungen warten bis zur Wiederanzeige; Statistiken- und Serien‑Sichtbarkeits‑Callbacks sind während des Verborgenseins getrennt. Der gehaltene Worker und die Puffer werden freigegeben, wenn die Komponente tatsächlich ungemountet wird, einschließlich eines Unmounts während des Verbergens.

React trennt das weitergereichte Ref während des Verbergens. Ein zuvor erfasstes Handle liefert bis zur Wiederanzeige weiterhin null von .chart. React 18 und frühere React‑19‑Releases zerstören Charts beim Unmount über passive Aufräumlogik, einschließlich Charts, die durch eine erneut suspendierte Suspense‑Boundary verborgen wurden.

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 Bulk‑Daten statt Vue‑Deep‑Proxies. Die Komponente emittiert ready, error und stats; Liniendiagramme emittieren außerdem seriesVisibilityChange. Ein Template‑Ref exponiert sein flaches chart‑Ref.

Die Statistik‑Sammlung folgt reaktiven Listenern. Ein alleiniger @stats.once‑Listener deaktiviert die Sammlung nach seinem ersten Ereignis; ein gewöhnlicher @stats‑Listener hält sie aktiviert. Ein konsumierter .once‑Listener bleibt für die Lebensdauer dieser Komponente konsumiert.

Angular

Das Angular‑Paket für Versionen 20–22 verwendet eigenständige 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 entsprechen der gemeinsamen Tabelle sowie fokussierten Accessibility‑Feldern und canvasAttributes. Ausgaben sind chartReady, chartError und stats; die Linienkomponente sendet zusätzlich seriesVisibilityChange. Eine Komponentenreferenz legt ihre öffentliche chart offen.

Die Statistik‑Erfassung ist nur aktiv, solange ein aktiver Abonnent die Ausgabe stats empfangen kann. Sie endet, nachdem der letzte Abonnent sich abgemeldet hat, einschließlich take(1), sowie wenn die Ausgabe abgeschlossen wird, Fehler wirft oder geschlossen wird.

Der Anwendungs-Builder von Angular transformiert Vite-Worker-URLs, die Paket-eigen sind, nicht. Fügen Sie die vom Anwendungscode verwendeten Engines dem assets-Array des Build-Targets 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 mit isPlatformBrowser geschützt, sodass Angular SSR Browser-Globals nicht berührt.

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 bindbar für imperativen Zugriff. Zusätzliche 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 erhält das gemountete Chart und null später während der Bereinigung. 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 Bereinigung, die erforderlich sind, um sowohl ein Liniendiagramm als auch ein Aktienchart zu reproduzieren.