Adaptadores de framework

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 lógica de renderização, não remodelam dados, não acrescentam telemetria em tempo de execução nem incorporam todos os gráficos na sua aplicação.

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

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

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() ao desmontar. Isto também termina um worker do gráfico 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, do renderer e de sobreposições, 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 do seu ref convencional ou API de componente, para que operações imperativas incomuns permaneçam disponíveis.

Tratar falhas de gráfico

Os hooks de erro do adaptador aceitam unknown porque erros de construção JavaScript não são obrigados a usar uma classe específica. Falhas emitidas pelo renderer da Sixtyfold são instâncias ChartRendererError. Falhas de resolução ou entrega de sobreposições são instâncias ChartOverlayError. Afixe o tipo do 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 do gráfico; volte a montar o adaptador se a aplicação optar por recuperar. Uma falha de sobreposição não é fatal: os itens bem-sucedidos permanecem instalados; se todos os itens pedidos falharem, mantém-se a sobreposição renderizada anteriormente.

Arrays tipados em massa transferem para o worker. Trate cada objecto de dados como one-shot: não o mutar in-place, e atribua um objecto novo com buffers novos para cada atualizaçã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 ordinários de canvas. O seu ref expõe ref.current?.chart. A construção inicial é adiada para microtask por isso a rotina de verificação do ciclo de vida de desenvolvimento do React Strict Mode não pode transferir os dados iniciais duas vezes.

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 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.

Angular

O pacote Angular 20–22 usa componentes standalone 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 focados de acessibilidade e canvasAttributes. Os outputs são chartReady, chartError e stats; o componente de linha também emite seriesVisibilityChange. Uma referência de componente expõe o seu público chart.

O construtor de aplicações do Angular não transforma URLs de worker pertencentes ao pacote. Adicione os engines usados pela aplicação ao array assets do target 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, portanto o Angular SSR não altera os globals 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. Props Svelte adicionais são onReady, onError, onStats, onSeriesVisibilityChange para gráficos de linhas, 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, durante a limpeza, null. canvasProps transmite atributos nativos do canvas. Todas as restantes 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 estrutura dos dados, a configuração do gráfico e a limpeza necessária para reproduzir tanto um gráfico de linha como um gráfico de ações.