Adaptateurs de framework

Les packages pour frameworks de Sixtyfold sont de minces adaptateurs de cycle de vie autour des mêmes moteurs LineChart et StockChart. Ils ne dupliquent pas la logique de rendu, ne transforment pas les données, n’ajoutent pas de télémétrie d’exécution et n’intègrent pas chaque graphique dans votre application.

Installez un adaptateur et le moteur que vous utilisez. Importez uniquement son point d’entrée /line ou /stock :

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

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

Remplacez react par vue, angular, svelte ou solid. Pour un graphique boursier, installez @sixtyfold/stock et importez /stock. Les moteurs de graphique sont des dépendances peer optionnelles de l’adaptateur ; installer un graphique en ligne n’installe donc pas le module stock.

Contrat d’adaptateur partagé

Tous les adaptateurs créent le graphique après le montage du composant, attendent initialize(), appliquent les entrées réactives et appellent destroy() au démontage. Cela termine également un worker de graphique et libère les observers, listeners et références aux gros buffers. Pendant le SSR, le composant n’émet que son hôte canvas ; utilisez @sixtyfold/ssr lorsque le serveur doit peindre les pixels du graphique.

Chaque adaptateur signale la disponibilité, les erreurs de construction, du renderer et des superpositions, ainsi que les statistiques de rendu. Les adaptateurs de type ligne signalent aussi SeriesVisibilityChangeEvent. Chaque framework expose l'instance sous-jacente LineChart ou StockChart via son API de ref ou de composant conventionnelle, de sorte que les opérations impératives peu courantes restent disponibles.

Gérer les défaillances des graphiques

Les hooks d'erreur d'adaptateur acceptent unknown car les erreurs de construction JavaScript ne sont pas tenues d'utiliser une classe particulière. Les échecs émis par le renderer Sixtyfold sont des instances de ChartRendererError. Les échecs de résolution ou de livraison des overlays sont des instances de ChartOverlayError. Restreignez la valeur avant de lire des champs structurés :

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

Utilisez la même importation depuis @sixtyfold/stock dans une application n'utilisant que le stock. error.phase est soit "initialization" soit "runtime". Une défaillance du renderer détruit cette instance de graphique ; remontez l'adaptateur si l'application choisit de récupérer. Une défaillance d'overlay n'est pas fatale : les éléments valides restent installés ; si tous les éléments demandés échouent, la superposition rendue précédemment est conservée.

Les tableaux typés en masse sont transférés vers le worker. Traitez chaque objet de données comme à usage unique : ne le muter pas sur place, et assignez un nouvel objet avec de nouveaux buffers pour chaque mise à jour. Cela préserve la voie zéro-copie pour des jeux de données de plusieurs millions de points.

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

Le composant accepte les attributs canvas ordinaires. Son ref expose ref.current?.chart. La construction initiale est différée en microtâche afin que le cycle de vie de développement de React Strict Mode ne puisse pas transférer les données initiales deux fois.

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>

Utilisez shallowRef ou markRaw pour des données en masse plutôt que les proxies profonds de Vue. Le composant émet ready, error et stats ; les graphiques en ligne émettent aussi seriesVisibilityChange. Une ref de template expose sa ref superficielle chart.

Angular

Le paquet Angular 20–22 utilise des composants standalone et des points d’entrée secondaires au format 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);
  }
}

Les entrées suivent le tableau partagé plus des champs d’accessibilité ciblés et canvasAttributes. Les sorties sont chartReady, chartError et stats ; le composant de courbe émet aussi seriesVisibilityChange. Une référence de composant expose son chart public.

Le générateur d’application Angular ne transforme pas les URL de worker de Vite appartenant au paquet. Ajoutez les engines utilisés par l’application au tableau assets de la cible de build dans angular.json :

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

La construction du graphique est protégée par isPlatformBrowser, ainsi l’Angular SSR ne touche pas aux globals du navigateur.

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 est bindable pour un accès impératif. Les props Svelte supplémentaires sont onReady, onError, onStats, onSeriesVisibilityChange pour les graphiques en lignes, canvasClass, canvasStyle et 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 reçoit le graphique monté et null ultérieurement lors du nettoyage. canvasProps transmet les attributs natifs du canvas. Tous les autres props suivent le contrat partagé.

Exemples complets

Le dépôt public inclut une application réactive minimale pour chaque framework pris en charge. Chaque application montre les packages, la structure des données, la configuration du graphique et le nettoyage nécessaires pour reproduire à la fois un graphique en ligne et un graphique boursier.