PureRenderer

PureRenderer rendert ein einzelnes schreibgeschuetztes Diagramm aus einer Visualisierungsspezifikation. Es hat eine minimale Benutzeroberflaeche -- keine Toolbar, keine Diagramm-Tabs, keine Feldliste. Das macht es ideal zum Einbetten von Diagrammen in Dashboards, Artikeln oder jedem Kontext, in dem Sie eine statische Visualisierung wuenschen.

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

Wann verwenden

Komponente	Interaktiv	Toolbar	Mehrere Diagramme	Feldliste
`GraphicWalker`	Vollstaendige Bearbeitung	Ja	Ja	Ja
`GraphicRenderer`	Nur Ansicht	Ja	Ja	Nein
`PureRenderer`	Nur Ansicht	Nein	Nein	Nein

Verwenden Sie PureRenderer, wenn Sie ein Diagramm mit dem kleinstmoeglichen Footprint anzeigen muessen.

Props

Lokaler Modus (clientseitige Daten)

Prop	Typ	Erforderlich	Beschreibung
`rawData`	`IRow[]`	Ja	Array von Datensaetzen.
`type`	`'local'`	Nein	Explizit lokalen Modus setzen (Standard).

Remote-Modus (serverseitige Daten)

Prop	Typ	Erforderlich	Beschreibung
`computation`	`IComputationFunction`	Ja	Berechnungsfunktion fuer serverseitige Verarbeitung.
`type`	`'remote'`	Ja	Muss auf `'remote'` gesetzt werden.

Visualisierungszustand

Prop	Typ	Erforderlich	Beschreibung
`visualState`	`DraggableFieldState`	Ja	Feldkodierungen (Zeilen, Spalten, Farbe, Groesse usw.).
`visualConfig`	`IVisualConfigNew`	Ja	Visualisierungskonfiguration (Aggregation, Geometrietyp, Koordinatensystem).
`visualLayout`	`IVisualLayout`	Nein	Layout-Konfiguration (Groesse, Stapelmodus, Formatierung). Faellt auf `visualConfig` zurueck, wenn nicht angegeben.

Erscheinungsbild-Props

Prop	Typ	Standard	Beschreibung
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Dark-Mode-Einstellung.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Diagramm-Theme.
`uiTheme`	`IUIThemeConfig`	`undefined`	Benutzerdefinierte UI-Farben.
`overrideSize`	`{ mode: 'auto' \| 'fixed' \| 'full'; width: number; height: number }`	`undefined`	Groesse aus der Spezifikation ueberschreiben.
`scales`	`IChannelScales`	`undefined`	Benutzerdefinierte Skalierungskonfigurationen.

Weitere Props

Prop	Typ	Beschreibung
`name`	`string`	Diagrammname (wird beim Export verwendet).
`className`	`string`	CSS-Klasse fuer das Wurzelelement.
`locale`	`string`	Gebietsschema fuer Zahlen-/Datumsformatierung. Standard ist `'en-US'`.
`disableCollapse`	`boolean`	Einklappbaren Diagramm-Container deaktivieren.

Beispiele

Lokaler Modus

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

Remote-Modus

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

Mit fester Groesse

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

Zustand aus GraphicWalker extrahieren

Sie koennen visualState, visualConfig und visualLayout aus einer GraphicWalker-Instanz ueber storeRef abrufen und diese dann an PureRenderer uebergeben:

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