Rendu côté serveur

@sixtyfold/ssr exécute le même moteur TypeScript contre un canvas serveur minimal. Il n'importe pas les globals canvas du DOM, ne crée pas de workers de navigateur et n'anime pas. La sortie PNG réelle des graphiques Line et Stock est continuellement vérifiée dans Node.js, Bun et Deno.

Installez le package SSR et une implémentation Canvas2D adaptée à votre runtime. L'ensemble de compatibilité vérifié utilise @napi-rs/canvas, mais Sixtyfold Charts ne l'impose pas comme dépendance de bibliothèque.

La référence générée répertorie précisément les fonctions SSR, les options de rendu et les types de canvas neutres au runtime.

pnpm add @sixtyfold/ssr@1 @napi-rs/canvas

import { createCanvas } from "@napi-rs/canvas";
import { renderLineChartSSR } from "@sixtyfold/ssr";

const width = 1200;
const height = 630;
const canvas = createCanvas(width * 2, height * 2);

renderLineChartSSR(
  canvas,
  data,
  {
    animated: false,
    chartBackground: "#081018",
    series: [{ color: "#65d6ff", width: 2 }],
    axis: { bottom: { format: "time" } },
  },
  { width, height, dpr: 2 },
);

const png = await canvas.encode("png");

L’implémentation du canvas est responsable du codage des images.

Runtimes serveur vérifiés

La suite de compatibilité épingle actuellement ces cibles CI :

Ce sont des cibles CI reproductibles, pas des revendications de version minimale. Chaque runtime rend des fixtures Line et Stock déterministes sans accès réseau. La validation compare les pixels du tracé avec une référence visuelle épinglée et exige que chaque étiquette nommée produise de l’encre visible à son ancre de mise en page exacte dans une région bornée ; elle vérifie également les signatures PNG, les dimensions et la sortie encodée. Elle n’étiquette pas les largeurs de glyphes dépendantes des polices ni les ratios d’encre. Les PNG sont conservés comme artefacts CI inspectables. Avant publication, la référence visuelle Node est répétée sur Ubuntu, macOS, et Windows.

Node.js et Bun exécutent directement le même module :

node app.mjs
bun app.mjs

Deno exige un arbre local node_modules et des permissions explicites pour l’addon Canvas Node-API :

deno run \
  --allow-read \
  --allow-env \
  --allow-ffi \
  --allow-sys=homedir \
  --node-modules-dir=manual \
  app.mjs

Ajoutez --allow-write=<output-directory> uniquement lorsque l’application écrit des images encodées sur le disque. Voir la vérification d’exécution runtime, le support Node-API de Bun, et les recommandations pour addon natifs Deno.

Configuration prise en charge

Le SSR accepte des options visuelles orientées rendu : padding, direction, grille, axes, arrière-plan, sélecteur de plage, style d’infobulle, style du crosshair, étiquettes, overlays, séries linéaires/LOD, chandeliers boursiers, indicateurs, profil de volume, lignes de prix et marqueurs. Les callbacks réservés au navigateur, les contrôles DOM, l’interaction par pointeur et les workers sont intentionnellement absents.

Les helpers 1.0.1 transmettent aussi le style de ligne au niveau du graphique marker et les options boursières timeScale, showLeftPriceMarker et showRightPriceMarker aux renderers partagés. Utilisez timeScale: "market" pour compresser les observations absentes dans la sortie statique des cours. Des réglages explicites axis.left.cursorLabel.visible ou axis.right.cursorLabel.visible prennent le pas sur les alias de marqueurs de prix correspondants. La sortie statique ne produit pas d’événements de survol ni de déplacement du curseur.

Définissez animated: false pour plus de clarté même si le rendu statique se termine immédiatement. Utilisez le même contrat width, height et dpr en tests et en production pour éviter des différences de snapshot.

Injection de canvas indépendante du runtime

Quand l'appelant ne possède pas déjà le canvas, fournissez createCanvas dans SSRRenderOptions. Il reçoit les dimensions de backing‑store. L'objet retourné doit contenir width, height et getContext("2d") avec les méthodes Canvas2D utilisées par le renderer.

Sortie déterministe

• Verrouillez l’implémentation du canvas et les polices dans l’image de rendu.
• Fournissez une famille de polices explicite si le serveur n’offre pas la pile de navigateurs.
• Évitez les superpositions d’URL distantes pendant le rendu des requêtes ; résolvez et mettez en cache les ressources avant le rendu.
• Maintenez stables les tableaux d’entrée, la taille du graphique, le DPR, la locale, le fuseau horaire et les options.