GraphicWalker

GraphicWalker ist die primaere Komponente, die eine vollstaendige interaktive Datenexplorations-Oberflaeche mit Drag-and-Drop-Diagrammerstellung, Feldverwaltung und mehreren Diagramm-Tabs bietet.

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

Props

Daten-Props

Prop	Typ	Erforderlich	Beschreibung
`data`	`Record<string, any>[]`	Ja*	Array von Datensaetzen. Wird fuer clientseitige Berechnung verwendet.
`fields`	`IMutField[]`	Ja	Felddefinitionen, die jede Spalte in Ihren Daten beschreiben.
`computation`	`IComputationFunction`	Ja*	Serverseitige Berechnungsfunktion. Alternative zu `data`.
`computationTimeout`	`number`	Nein	Timeout in ms fuer Berechnungsanfragen.

*Geben Sie entweder data (clientseitig) oder computation (serverseitig) an, nicht beides.

Diagrammkonfigurations-Props

Prop	Typ	Standard	Beschreibung
`chart`	`IChart[]`	`undefined`	Vorkonfigurierte Diagrammspezifikationen zum Laden.
`defaultConfig`	`{ config?: Partial<IVisualConfigNew>; layout?: Partial<IVisualLayout> }`	`undefined`	Standardkonfiguration fuer neue Diagramme.
`defaultRenderer`	`'vega-lite' \| 'observable-plot'`	`'vega-lite'`	Standard-Rendering-Engine fuer neue Diagramme.

Erscheinungsbild-Props

Prop	Typ	Standard	Beschreibung
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Dark-Mode-Einstellung. `'media'` folgt der Systemeinstellung.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Diagramm-Rendering-Theme. Integrierte Optionen: `'vega'`, `'g2'`, `'streamlit'`.
`uiTheme`	`IUIThemeConfig`	`undefined`	Benutzerdefiniertes UI-Farbschema fuer hellen und dunklen Modus.

UI-Steuerungs-Props

Prop	Typ	Standard	Beschreibung
`hideChartNav`	`boolean`	`false`	Blendet die Diagramm-Tab-Navigation aus, beschraenkt auf ein einzelnes Diagramm.
`hideSegmentNav`	`boolean`	`false`	Blendet die Daten-/Visualisierungs-Segmentnavigation aus.
`hideProfiling`	`boolean`	`false`	Blendet Feld-Profiling (Verteilungsvorschauen) aus.
`toolbar`	`{ extra?: ToolbarItemProps[]; exclude?: string[] }`	`undefined`	Toolbar anpassen -- zusaetzliche Schaltflaechen hinzufuegen oder integrierte ausblenden.

Datenfunktions-Props

Prop	Typ	Standard	Beschreibung
`scales`	`IChannelScales`	`undefined`	Benutzerdefinierte Skalierungskonfigurationen fuer visuelle Kanaele.
`geographicData`	`IGeographicData & { key: string }`	`undefined`	GeoJSON/TopoJSON-Daten fuer geografische Visualisierungen.
`geoList`	`IGeoDataItem[]`	`undefined`	Liste der verfuegbaren geografischen Datensaetze zur Auswahl.
`experimentalFeatures`	`{ computedField?: boolean }`	`undefined`	Experimentelle Funktionen wie berechnete Felder aktivieren.

i18n-Props

Prop	Typ	Standard	Beschreibung
`i18nLang`	`string`	`undefined`	Sprachcode (z.B. `'en-US'`, `'zh-CN'`, `'ja-JP'`).
`i18nResources`	`Record<string, Record<string, string>>`	`undefined`	Benutzerdefinierte Uebersetzungsressourcen.

Ref- & Zustands-Props

Prop	Typ	Beschreibung
`ref`	`React.Ref<IGWHandler>`	Ref zum Zugriff auf die Handler-API (Diagramme exportieren, Tabs navigieren usw.).
`storeRef`	`React.RefObject<CommonStore>`	Ref zum internen Zustandsspeicher.
`keepAlive`	`boolean \| string`	Komponentenzustand beim Aushängen beibehalten. Uebergeben Sie einen String als eindeutigen Schluessel fuer mehrere Instanzen.
`onMetaChange`	`(fid: string, meta: Partial<IMutField>) => void`	Callback bei Aenderungen der Feldmetadaten.

Fehlerbehandlung

Prop	Typ	Beschreibung
`onError`	`(err: Error) => void`	Callback zur Fehlerbehandlung.

Styling

Prop	Typ	Beschreibung
`className`	`string`	CSS-Klasse fuer das Wurzelelement.
`style`	`React.CSSProperties`	Inline-Styles fuer das Wurzelelement.

Ref-Handler (IGWHandler)

Greifen Sie ueber eine React-Ref auf den Handler zu, um die Komponente programmatisch zu steuern:

import { useRef } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import type { IGWHandler } from '@kanaries/graphic-walker';
 
function App() {
  const gwRef = useRef<IGWHandler>(null);
 
  return <GraphicWalker ref={gwRef} data={data} fields={fields} />;
}

Handler-Eigenschaften und -Methoden

Mitglied	Typ	Beschreibung
`chartCount`	`number`	Gesamtanzahl der Diagramm-Tabs.
`chartIndex`	`number`	Aktuell ausgewaehlter Diagramm-Tab-Index.
`openChart(index)`	`(index: number) => void`	Zu einem bestimmten Diagramm-Tab wechseln.
`renderStatus`	`'computing' \| 'rendering' \| 'idle' \| 'error'`	Aktueller Render-Status des aktiven Diagramms.
`onRenderStatusChange(cb)`	`(cb: Function) => () => void`	Auf Render-Statusaenderungen lauschen. Gibt eine Dispose-Funktion zurueck.
`exportChart(mode?)`	`(mode?: 'svg' \| 'data-url') => Promise<IChartExportResult>`	Das aktuelle Diagramm exportieren. Standard ist `'svg'`.
`exportChartList(mode?)`	`(mode?: 'svg' \| 'data-url') => AsyncGenerator`	Async-Generator, der die Exportdaten jedes Diagramms liefert.

Export-Beispiel

async function handleExport() {
  if (!gwRef.current) return;
 
  // Export current chart as SVG
  const result = await gwRef.current.exportChart('svg');
  console.log(result.title, result.charts);
 
  // Export all charts
  for await (const item of gwRef.current.exportChartList('data-url')) {
    console.log(`Chart ${item.index + 1}/${item.total}:`, item.data.title);
  }
}

Beispiele

Einfacher Explorer

import { GraphicWalker } from '@kanaries/graphic-walker';
 
function Explorer({ data, fields }) {
  return <GraphicWalker data={data} fields={fields} />;
}

Mit Dark Mode und Theme

<GraphicWalker
  data={data}
  fields={fields}
  appearance="dark"
  vizThemeConfig="streamlit"
/>

Mit Toolbar-Anpassung

<GraphicWalker
  data={data}
  fields={fields}
  toolbar={{
    exclude: ['export_chart'],
    extra: [
      {
        key: 'custom-save',
        label: 'Save',
        icon: SaveIcon,
        onClick: handleSave,
      },
    ],
  }}
/>

Serverseitige Berechnung

import { GraphicWalker } from '@kanaries/graphic-walker';
import type { IComputationFunction } from '@kanaries/graphic-walker';
 
const computation: IComputationFunction = async (payload) => {
  const response = await fetch('/api/compute', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return response.json();
};
 
function App() {
  return (
    <GraphicWalker
      computation={computation}
      fields={fields}
    />
  );
}

Erste Schritte GraphicRenderer