Adaptadores de frameworks

Los paquetes de framework de Sixtyfold son adaptadores ligeros del ciclo de vida alrededor de los mismos motores LineChart y StockChart. No duplican la lógica de renderizado, no reconfiguran datos, no añaden telemetría en tiempo de ejecución ni incorporan todos los gráficos en su aplicación.

Instale un adaptador más el motor que utilice. Importe únicamente su punto de entrada /line o /stock:

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

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

Reemplace react por vue, angular, svelte o solid. Para un gráfico de valores, instale @sixtyfold/stock e importe /stock. Los motores de gráfico son dependencias peer opcionales del adaptador, por lo que instalar un gráfico de líneas no instala stock.

Contrato compartido del adaptador

Todos los adaptadores crean el gráfico después de que el componente monta, esperan a initialize(), aplican entradas reactivas y llaman a destroy() al desmontar. Esto también termina un worker de gráfico y libera observadores, oyentes y referencias a buffers grandes. Durante SSR el componente emite solo su host canvas; use @sixtyfold/ssr cuando el servidor deba pintar píxeles del gráfico.

Cada adaptador informa de su estado listo, errores de construcción e instalación de propiedades, errores del renderizador y de overlay, además de estadísticas de renderizado. Los adaptadores de líneas también informan SeriesVisibilityChangeEvent. Cada framework expone la instancia subyacente LineChart o StockChart a través de su API convencional de refs o componentes, de modo que las operaciones imperativas poco comunes siguen siendo accesibles.

Readiness significa que las props iniciales han sido aceptadas, no que su primer fotograma en canvas haya sido pintado. Los cambios imperativos realizados en el callback ready no son sobrescritos por un lote diferido de props iniciales.

Gestionar fallos del chart

Los hooks de error del adaptador aceptan unknown porque los errores de construcción JavaScript no están obligados a usar una clase concreta. Los fallos emitidos por el renderer de Sixtyfold son instancias de ChartRendererError. Los fallos de resolución de overlays o de entrega del renderer son instancias de ChartOverlayError. Reduzca el valor antes de leer campos estructurados:

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

Use la misma importación desde @sixtyfold/stock en una aplicación que sólo use stock. error.phase es o bien "initialization" o bien "runtime". Un fallo del renderer destruye esa instancia de chart; vuelva a montar el adaptador si la aplicación decide recuperarla. Un fallo de overlay no es fatal: los ítems instalados con éxito permanecen; si cada ítem solicitado falla, permanece el overlay renderizado previamente.

Una instalación de prop reactiva rechazada informa un error y retiene la notificación inicial de listo. Proporcione props corregidos para reintentar sin volver a montar. Los datos ya instalados con éxito no se transfieren de nuevo cuando un prop posterior falla. Esta recuperación no se aplica a errores terminales del renderer.

Los arrays tipados en bloque se transfieren al worker. Trate cada objeto de datos como de un solo uso: no lo muten in situ y asigne un objeto nuevo con buffers nuevos para cada actualización. Esto conserva la ruta de zero-copy para conjuntos de datos de varios millones de puntos.

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

El componente acepta atributos ordinarios de canvas. Su ref expone ref.current?.chart. La construcción inicial se aplaza a microtarea para que la comprobación del ciclo de vida en modo Strict de React en desarrollo no pueda transferir los datos iniciales dos veces.

React 19.2+ Activity puede ocultar y mostrar un gráfico sin recrear su renderer ni retransmitir datos. La asignación de props y las notificaciones de readiness/error esperan hasta la revelación; las estadísticas y los callbacks de visibilidad de series se desconectan mientras está oculto. El worker y los buffers retenidos se liberan cuando el componente se desmonta realmente, incluyendo un desmontado mientras está oculto.

React desconecta el ref reenviado mientras está oculto. Un handle capturado previamente también devuelve null desde .chart hasta la revelación. React 18 y las versiones anteriores de React 19 destruyen los gráficos al desmontar mediante limpieza pasiva, incluyendo gráficos ocultos por un límite Suspense re-suspendido.

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>

Use shallowRef o markRaw para datos por lotes en lugar de proxies profundos de Vue. El componente emite ready, error y stats; los gráficos de líneas también emiten seriesVisibilityChange. Un ref de plantilla expone su ref superficial chart.

La recopilación de estadísticas sigue a los oyentes reactivos. Un único oyente @stats.once desactiva la recopilación tras su primer evento; un oyente ordinario @stats la mantiene activada. Un oyente consumido .once permanece consumido durante la vida del componente.

Angular

El paquete Angular 20–22 utiliza componentes independientes y puntos de entrada secundarios en el 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);
  }
}

Las entradas siguen la tabla compartida más campos de accesibilidad centrados y canvasAttributes. Las salidas son chartReady, chartError y stats; el componente de línea también emite seriesVisibilityChange. Una referencia de componente expone su chart pública.

La recopilación de estadísticas solo está habilitada mientras haya un suscriptor activo que pueda recibir la salida stats. Se detiene después de que el último suscriptor se dé de baja, incluyendo take(1), y cuando la salida completa, produce errores o se cierra.

El compilador de aplicaciones de Angular no transforma las URLs de worker de Vite pertenecientes a paquetes. Añada los motores usados por la aplicación a la matriz assets del objetivo de compilación en angular.json:

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

La construcción del gráfico está protegida con isPlatformBrowser, por lo que Angular SSR no modifica los globals del navegador.

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 es enlazable para acceso imperativo. Las props adicionales de Svelte son onReady, onError, onStats, onSeriesVisibilityChange para gráficos de líneas, canvasClass, canvasStyle, y 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 recibe el gráfico montado y más tarde null durante la limpieza. canvasProps transmite atributos nativos del canvas. Todas las demás props siguen el contrato compartido.

Ejemplos completos

El repositorio público incluye una aplicación mínima y responsiva para cada framework compatible. Cada aplicación muestra los paquetes, la forma de los datos, la configuración del gráfico y la limpieza necesaria para reproducir tanto un gráfico de líneas como uno bursátil.