PureRenderer

PureRenderer affiche un graphique unique en lecture seule à partir d'une spécification de visualisation. Il dispose d'une interface minimale — pas de barre d'outils, pas d'onglets de graphiques, pas de liste de champs. Cela le rend idéal pour intégrer des graphiques dans des tableaux de bord, des articles ou tout contexte où vous souhaitez une visualisation statique.

import { PureRenderer } from '@kanaries/graphic-walker';

Quand l'utiliser

Composant	Interactif	Barre d'outils	Graphiques multiples	Liste de champs
`GraphicWalker`	Édition complète	Oui	Oui	Oui
`GraphicRenderer`	Lecture seule	Oui	Oui	Non
`PureRenderer`	Lecture seule	Non	Non	Non

Utilisez PureRenderer lorsque vous devez afficher un graphique avec l'empreinte la plus réduite possible.

Props

Mode local (données côté client)

Prop	Type	Requis	Description
`rawData`	`IRow[]`	Oui	Tableau d'enregistrements de données.
`type`	`'local'`	Non	Définit explicitement le mode local (par défaut).

Mode distant (données côté serveur)

Prop	Type	Requis	Description
`computation`	`IComputationFunction`	Oui	Fonction de calcul pour le traitement côté serveur.
`type`	`'remote'`	Oui	Doit être défini sur `'remote'`.

État de visualisation

Prop	Type	Requis	Description
`visualState`	`DraggableFieldState`	Oui	Encodages de champs (lignes, colonnes, couleur, taille, etc.).
`visualConfig`	`IVisualConfigNew`	Oui	Configuration de visualisation (agrégation, type de géométrie, système de coordonnées).
`visualLayout`	`IVisualLayout`	Non	Configuration de mise en page (taille, mode d'empilement, formatage). Se rabat sur `visualConfig` si non fourni.

Props d'apparence

Prop	Type	Par défaut	Description
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Réglage du mode sombre.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Thème du graphique.
`uiTheme`	`IUIThemeConfig`	`undefined`	Couleurs d'interface personnalisées.
`overrideSize`	`{ mode: 'auto' \| 'fixed' \| 'full'; width: number; height: number }`	`undefined`	Remplace la taille définie dans la spécification.
`scales`	`IChannelScales`	`undefined`	Configurations d'échelles personnalisées.

Autres props

Prop	Type	Description
`name`	`string`	Nom du graphique (utilisé à l'export).
`className`	`string`	Classe CSS pour l'élément racine.
`locale`	`string`	Locale pour le formatage des nombres/dates. Par défaut `'en-US'`.
`disableCollapse`	`boolean`	Désactive le conteneur de graphique repliable.

Exemples

Mode local

import { PureRenderer } from '@kanaries/graphic-walker';
import type { DraggableFieldState, IVisualConfigNew, IVisualLayout } from '@kanaries/graphic-walker';
 
const data = [
  { category: 'A', value: 100 },
  { category: 'B', value: 200 },
  { category: 'C', value: 150 },
];
 
const visualState: DraggableFieldState = {
  dimensions: [],
  measures: [],
  rows: [{ fid: 'value', name: 'Value', analyticType: 'measure', semanticType: 'quantitative' }],
  columns: [{ fid: 'category', name: 'Category', analyticType: 'dimension', semanticType: 'nominal' }],
  color: [],
  opacity: [],
  size: [],
  shape: [],
  theta: [],
  radius: [],
  longitude: [],
  latitude: [],
  geoId: [],
  details: [],
  filters: [],
  text: [],
};
 
const visualConfig: IVisualConfigNew = {
  defaultAggregated: true,
  geoms: ['bar'],
  coordSystem: 'generic',
  limit: -1,
};
 
const visualLayout: IVisualLayout = {
  showTableSummary: false,
  stack: 'stack',
  showActions: false,
  interactiveScale: false,
  zeroScale: true,
  size: { mode: 'auto', width: 600, height: 400 },
  format: {},
  resolve: {},
};
 
function ChartEmbed() {
  return (
    <PureRenderer
      rawData={data}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

Mode distant

import { PureRenderer } from '@kanaries/graphic-walker';
import type { IComputationFunction } from '@kanaries/graphic-walker';
 
const computation: IComputationFunction = async (payload) => {
  const res = await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return res.json();
};
 
function RemoteChart() {
  return (
    <PureRenderer
      type="remote"
      computation={computation}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

Avec taille fixe

<PureRenderer
  rawData={data}
  visualState={visualState}
  visualConfig={visualConfig}
  overrideSize={{ mode: 'fixed', width: 400, height: 300 }}
/>

Extraction de l'état depuis GraphicWalker

Vous pouvez obtenir le visualState, visualConfig et visualLayout d'une instance GraphicWalker en utilisant storeRef, puis les passer à PureRenderer :

import { useRef } from 'react';
import { GraphicWalker, PureRenderer } from '@kanaries/graphic-walker';
import type { VizSpecStore } from '@kanaries/graphic-walker';
 
function App() {
  const storeRef = useRef<VizSpecStore>(null);
 
  const handleExport = () => {
    if (!storeRef.current) return;
    const chart = storeRef.current.exportCurrentChart();
    // chart contains encodings, config, layout
    // Pass these to PureRenderer elsewhere
  };
 
  return <GraphicWalker data={data} fields={fields} storeRef={storeRef} />;
}