Adaptadores de frameworks

Os pacotes de framework da Sixtyfold são adaptadores de ciclo de vida leves em torno dos mesmos motores LineChart e StockChart. Não duplicam a lógica de renderização, não transformam dados, não adicionam telemetria em runtime nem incorporam todos os gráficos na sua aplicação.

Instale um adaptador mais o motor que utilizar. Importe apenas o seu ponto de entrada /line ou /stock:

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

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

Substitua react por vue, angular, svelte ou solid. Para um gráfico de ações, instale @sixtyfold/stock e importe /stock. Os motores de gráfico são dependências peer opcionais do adaptador, pelo que instalar um gráfico de linhas não instala o de ações.

Contrato partilhado do adaptador

Todos os adaptadores criam o gráfico após o componente montar, aguardam initialize(), aplicam entradas reativas e chamam destroy() no unmount. Isto também termina um chart worker e liberta observadores, ouvintes e referências a buffers grandes. Durante SSR o componente emite apenas o seu host de canvas; use @sixtyfold/ssr quando o servidor tiver de pintar pixels do gráfico.

Cada adapter reporta prontidão, erros de construção e de instalação de props, erros do renderer e de overlays, além de estatísticas de renderização. Os adapters de linha também reportam SeriesVisibilityChangeEvent. Cada framework expõe a instância subjacente LineChart ou StockChart através da sua API convencional de ref ou componente, para que operações imperativas invulgares permaneçam disponíveis.

Prontidão significa que as props iniciais foram aceites, não que o primeiro frame do canvas tenha sido pintado. Alterações imperativas efectuadas no callback de ready não são sobrescritas por um lote diferido de props iniciais.

Tratar falhas do gráfico

Os hooks de erro do adaptador aceitam unknown porque erros de construção JavaScript não são obrigados a usar uma determinada classe. Falhas emitidas pelo renderer da Sixtyfold são instâncias de ChartRendererError. Falhas de resolução de overlay ou de entrega pelo renderer são instâncias de ChartOverlayError. Restrinja o valor antes de ler campos estruturados:

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 a mesma importação de @sixtyfold/stock numa aplicação apenas com stock. error.phase é ou "initialization" ou "runtime". Uma falha do renderer destrói essa instância de gráfico; remonte o adaptador se a aplicação optar por recuperar. Uma falha de overlay não é fatal: os itens instalados com sucesso mantêm‑se; se cada item solicitado falhar, o overlay previamente renderizado mantém‑se.

Uma instalação rejeitada de props reativas regista um erro e retém a notificação inicial de pronto. Forneça props corrigidas para tentar novamente sem remontar. Dados já instalados com sucesso não são transferidos novamente quando uma prop posterior falha. Esta recuperação não se aplica a erros terminais do renderer.

Arrays tipados em massa são transferidos para o worker. Trate cada objeto de dados como de utilização única: não o altere no local e atribua um objeto novo com buffers novos para cada actualização. Isto preserva o caminho zero-copy para conjuntos de dados com milhões de pontos.

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

O componente aceita atributos normais de canvas. O seu ref expõe ref.current?.chart. A construção inicial é diferida por microtask para que a sonda do ciclo de vida de desenvolvimento do React Strict Mode não possa transferir os dados iniciais duas vezes.

React 19.2+ Activity pode ocultar e revelar um gráfico sem recriar o seu renderer nem retransmitir dados. A instalação de props e as notificações de prontidão/erro aguardam até à revelação; estatísticas e callbacks de visibilidade de séries são desligados enquanto ocultos. O worker e os buffers retidos são libertados quando o componente é efetivamente desmontado, incluindo uma desmontagem enquanto estiver oculto.

O React desliga o ref encaminhado enquanto oculto. Um handle previamente capturado também retorna null de .chart até à revelação. O React 18 e as versões do React 19 anteriores destroem os gráficos na desmontagem através de limpeza passiva, incluindo gráficos ocultos por um boundary re-suspenso Suspense.

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>

Utilize shallowRef ou markRaw para dados em massa em vez de proxies profundos do Vue. O componente emite ready, error e stats; gráficos de linhas também emitem seriesVisibilityChange. Uma ref de template expõe a sua ref superficial chart.

A recolha de estatísticas segue os ouvintes reativos. Um único ouvinte @stats.once desativa a recolha após o seu primeiro evento; um ouvinte normal @stats mantém‑na ativa. Um ouvinte consumido .once permanece consumido durante a vida útil desse componente.

Angular

O pacote Angular 20–22 utiliza componentes autónomos e pontos de entrada secundários no 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);
  }
}

Os inputs seguem a tabela partilhada mais campos de acessibilidade focados e canvasAttributes. Os outputs são chartReady, chartError e stats; o componente de linha também emite seriesVisibilityChange. Uma referência ao componente expõe o seu chart público.

A recolha de estatísticas é ativada apenas enquanto um subscritor ativo puder receber o output stats. Esta cessa depois do último subscritor cancelar a subscrição, incluindo take(1), e quando o output completa, produz um erro ou é fechado.

O construtor de aplicações do Angular não transforma URLs de workers do Vite pertencentes a pacotes. Adicione os engines usados pela aplicação ao array assets do destino de build em angular.json:

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

A construção do gráfico é protegida com isPlatformBrowser, pelo que o SSR do Angular não altera globais do browser.

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 é vinculável para acesso imperativo. As propriedades Svelte adicionais são onReady, onError, onStats, onSeriesVisibilityChange para gráficos de linha, canvasClass, canvasStyle e 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 recebe o gráfico montado e mais tarde null durante a limpeza. canvasProps transmite atributos nativos do canvas. Todos os demais props seguem o contrato partilhado.

Exemplos completos

O repositório público inclui uma aplicação responsiva mínima para cada framework suportado. Cada aplicação mostra os pacotes, a forma dos dados, a configuração do gráfico e a limpeza necessárias para reproduzir tanto um gráfico de linhas como um gráfico de ações.