Adaptateurs pour frameworks

Les packages pour frameworks de Sixtyfold sont des adaptateurs de cycle de vie légers autour des mêmes moteurs LineChart et StockChart. Ils ne dupliquent pas la logique de rendu, ne remodèlent pas les données, n’ajoutent pas de télémetrie d’exécution et n’intègrent pas tous les graphiques 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@1 @sixtyfold/line@1

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 rendu sont des dépendances pair-optionnelles de l’adaptateur, donc installer un graphique en ligne n’installe 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() lors du démontage. Cela termine également un worker de graphique et libère les observers, écouteurs et références à de 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 sa disponibilité, les erreurs de construction et d'installation des props, les erreurs du renderer et des overlays, ainsi que les statistiques de rendu. Les adaptateurs de type line signalent aussi SeriesVisibilityChangeEvent. Chaque framework expose l'instance sous-jacente LineChart ou StockChart via son API conventionnelle de ref ou de composant, de sorte que les opérations impératives peu courantes restent accessibles.

La disponibilité signifie que les props initiales ont été acceptées, et non que leur première image Canvas a été peinte. Les modifications impératives effectuées dans le rappel ready ne sont pas écrasées par un lot différé de props initiales.

Gérer les erreurs du graphique

Les hooks d’erreur d’adaptateur acceptent unknown parce que les erreurs de construction JavaScript ne doivent pas obligatoirement utiliser une classe particulière. Les échecs émis par le renderer Sixtyfold sont des instances de ChartRendererError. Les échecs de résolution d’overlay ou de livraison par le renderer sont des instances de ChartOverlayError. Restreignez la valeur avant de lire les 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". Un échec du renderer détruit cette instance de graphique ; remontez l’adaptateur si l’application choisit de récupérer. Un échec d’overlay n’est pas fatal : les éléments installés avec succès restent en place ; si chaque élément demandé échoue, l’overlay précédemment rendu reste.

Une installation de prop réactive rejetée signale une erreur et retient la notification initiale de readiness. Fournissez des props corrigées pour réessayer sans remonter le composant. Les données déjà installées avec succès ne sont pas transférées à nouveau lorsqu’un prop ultérieur échoue. Cette récupération ne s’applique pas aux erreurs terminales du renderer.

Les tableaux typés en masse sont transférés vers le worker. Traitez chaque objet de données comme à usage unique : ne le modifiez pas sur place et affectez un nouvel objet avec des buffers neufs pour chaque mise à jour. Cela préserve le chemin zéro-copie pour les 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.

React 19.2+ Activity peut masquer et révéler un graphique sans recréer son renderer ni retransférer les données. L'installation des props et les notifications de disponibilité/erreur attendent la révélation ; les callbacks de statistiques et de visibilité des séries sont déconnectés pendant que le graphique est masqué. Le worker et les buffers conservés sont libérés lorsque le composant est effectivement démonté, y compris lors d'un démontage alors qu'il est masqué.

React déconnecte la ref transmise pendant que le composant est masqué. Un handle précédemment capturé renvoie aussi null depuis .chart jusqu'à la révélation. React 18 et les versions 19 antérieures détruisent les graphiques au démontage via un nettoyage passif, y compris les graphiques masqués par une frontière Suspense ré-suspendue.

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 bloc au lieu des 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 peu profonde chart.

La collecte de statistiques suit les écouteurs réactifs. Un unique écouteur @stats.once désactive la collecte après son premier événement ; un écouteur ordinaire @stats la maintient activée. Un écouteur consommé .once reste consommé pendant la durée de vie de ce composant.

Angular

Le paquet Angular 20–22 utilise des composants autonomes 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é ainsi que les champs d’accessibilité ciblés et canvasAttributes. Les sorties sont chartReady, chartError et stats ; le composant de ligne émet également seriesVisibilityChange. Une référence de composant expose son chart public.

La collecte de statistiques n’est activée que tant qu’un abonné actif peut recevoir la sortie stats. Elle s’arrête après que le dernier abonné s’est désabonné, y compris take(1), et lorsque la sortie se termine, génère une erreur ou est fermée.

Le builder d’application Angular ne transforme pas les URL de worker Vite appartenant aux paquets. 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 chart est protégée par isPlatformBrowser, de sorte que le SSR d’Angular ne modifie pas les 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 ligne, 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 chart monté et plus tard null pendant le 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 paquets, la structure des données, la configuration du graphique et le nettoyage nécessaires pour reproduire à la fois un graphique en courbes et un graphique boursier.