Workers, thread principal e renderização

O Sixtyfold tem um design de renderização TypeScript com três anfitriões: um worker OffscreenCanvas, um adaptador assíncrono no thread principal e o ponto de entrada de renderização do lado do servidor. Canvas2D é o único backend gráfico.

A seleção do renderer faz parte de LineChartOptions e StockChartOptions. O modo resolvido está disponível a partir de chart.getRenderMode().

Seleção automática

renderMode: "auto" prefere um worker quando o navegador suporta Worker, OffscreenCanvas e transferência de canvas. Recorre ao thread principal quando essas capacidades faltam ou a construção do worker é bloqueada sincronicamente, incluindo por uma Content Security Policy restritiva.

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();

console.log(chart.getRenderMode()); // "worker" or "main"

renderMode: "worker" exprime uma preferência, não uma promessa; continua a recorrer ao fallback quando o render por worker não pode começar. Utilize getRenderMode() para telemetria e informação de suporte.

Modo worker

O modo worker transfere o controlo do canvas e de grandes buffers de typed-array. É o caminho preferido para gráficos interativos com milhões de pontos, porque a construção da hierarquia, culling, layout e desenho não ocupam a tarefa de UI do browser.

Callbacks no thread principal, como renderização personalizada de tooltips, recebem mensagens compactas do renderer em vez de acesso direto ao estado do worker. Mantenha os callbacks determinísticos e rápidos.

Modo no thread principal

Use renderMode: "main" para ambientes de teste, browsers sem canvases transferíveis, hosts estritos que proíbem workers, ou gráficos estáticos mais pequenos em que uma integração mais simples é mais importante do que o isolamento do thread de UI.

O adaptador do thread principal entrega intencionalmente mensagens do renderizador de forma assíncrona. Não presuma que a invocação de setData tenha concluído de forma síncrona o seu primeiro frame; utilize estatísticas ou uma interface de disponibilidade ao nível da aplicação quando a conclusão do frame for relevante.

As verificações de release exercitam Line e Stock tanto pelo caminho do thread principal como pelo caminho padrão de produção auto no Chromium, Firefox e WebKit. Em motores capazes, auto resolve para um worker OffscreenCanvas. O contrato de forced-worker também é executado no Chromium. Isto verifica compatibilidade, não uma garantia de taxa de frames independente do dispositivo.

Dimensionamento e DPR

Defina a largura e a altura CSS do canvas através do layout. A Sixtyfold Charts observa alterações no tamanho do elemento e na device-pixel-ratio, e depois atualiza o backing store e o layout do renderizador. resize() permanece disponível quando um anfitrião altera o layout de uma forma que não pode ser observada imediatamente.

Evite definir apenas os atributos width e height do canvas para gráficos responsivos. Esses atributos são valores de backing-store, enquanto os campos públicos de tamanhos e estilos do Sixtyfold Charts usam pixels CSS.

Política de Segurança de Conteúdo

Uma política restritiva em produção normalmente requer:

default-src 'self';
script-src 'self';
worker-src 'self';
img-src 'self' data: blob:;
connect-src 'self';

Adapte este exemplo à aplicação em vez de copiá‑lo cegamente. Imagens de sobreposição remotas exigem que a sua origem conste em img-src e que as respostas CORS sejam compatíveis.

Visibilidade e limpeza

O gráfico no navegador pausa ou evita trabalho desnecessário quando não está visível. O intervalo opcional de keep-alive no Safari está desativado por omissão e só deve ser ativado após reproduzir a recuperação de recursos nas versões-alvo do Safari.

Chame sempre destroy() antes de descartar permanentemente o canvas. Em aplicações de página única, os ganchos de limpeza do framework são o local correto.

Os callbacks de prontidão do framework confirmam a inicialização e a instalação inicial de props bem-sucedida, não um frame de canvas pintado. React 19.2+ Activity ocultação mantém o renderer montado e a sua memória até ao unmount real; não é um limite de eliminação de worker. Consulte o contrato de ciclo de vida adapter para refs ocultas, callbacks diferidos e recuperação de erros.