Adaptadores para frameworks

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

Instala un adaptador y el motor que uses. Importa solo su punto de entrada /line o /stock:

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

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

Sustituya 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 opcionales pares del adaptador, por lo que instalar un gráfico de líneas no instala el de valores.

Contrato compartido del adaptador

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

Cada adaptador informa de readiness, errores de construcción, del renderer y de overlays, además de estadísticas de renderizado. Los adaptadores de línea también informan SeriesVisibilityChangeEvent. Cada framework expone la instancia subyacente LineChart o StockChart mediante su API convencional de ref o componente, de modo que operaciones imperativas poco comunes siguen estando disponibles.

Gestionar fallos del gráfico

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 renderizador de Sixtyfold son instancias de ChartRendererError. Los fallos de resolución o entrega de overlays son instancias de ChartOverlayError. Afine 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 solo de valores. error.phase es o bien "initialization" o bien "runtime". Un fallo del renderizador destruye esa instancia de gráfico; vuelva a montar el adaptador si la aplicación opta por recuperarse. Un fallo de overlay no es fatal: los elementos correctos permanecen instalados; si fallan todos los elementos solicitados, se conserva la superposición renderizada anteriormente.

Las matrices tipadas en bloque se transfieren al worker. Trate cada objeto de datos como de un solo uso: no lo mutar in situ y asigne un objeto nuevo con buffers nuevos en cada actualización. Esto preserva la vía 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 habituales de canvas. Su ref expone ref.current?.chart. La construcción inicial se retrasa a microtarea para que la comprobación del ciclo de vida en modo Strict de React en desarrollo no transfiera los datos iniciales dos veces.

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 en bloque en lugar de proxies profundos de Vue. El componente emite ready, error y stats; los gráficos de línea también emiten seriesVisibilityChange. Un ref de plantilla expone su ref superficial chart.

Angular

El paquete para Angular 20–22 utiliza componentes standalone 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 los campos de accesibilidad focalizados y canvasAttributes. Las salidas son chartReady, chartError y stats; el componente de línea además emite seriesVisibilityChange. Una referencia al componente expone su chart pública.

El builder de aplicaciones de Angular no transforma las URLs de worker propiedad del paquete. Añade los engines usados por la aplicación al array assets del objetivo de build 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 el SSR de Angular no toca 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 vinculable para acceso imperativo. Props adicionales de Svelte son onReady, onError, onStats, onSeriesVisibilityChange para gráficos de línea, 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 posteriormente 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 responsive para cada framework soportado. 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 un gráfico de acciones.