Skip to content
GRAPHIC WALKER
Erste Schritte

Erste Schritte

Diese Anleitung fuehrt Sie durch die Installation von Graphic Walker und das Rendern Ihres ersten interaktiven Diagramms.

Voraussetzungen

  • Node.js 16+
  • React 17+ (React 18 empfohlen)

Installation

Installieren Sie das Paket mit Ihrem bevorzugten Paketmanager:

# npm
npm install @kanaries/graphic-walker
 
# yarn
yarn add @kanaries/graphic-walker
 
# pnpm
pnpm add @kanaries/graphic-walker

Grundlegende Verwendung

Importieren Sie die GraphicWalker-Komponente und uebergeben Sie Ihre Daten und Felddefinitionen:

import { GraphicWalker } from '@kanaries/graphic-walker';
 
const data = [
  { date: '2024-01-01', product: 'A', sales: 120, profit: 40 },
  { date: '2024-01-01', product: 'B', sales: 200, profit: 80 },
  { date: '2024-02-01', product: 'A', sales: 150, profit: 55 },
  { date: '2024-02-01', product: 'B', sales: 180, profit: 65 },
];
 
const fields = [
  { fid: 'date', name: 'Date', semanticType: 'temporal', analyticType: 'dimension' },
  { fid: 'product', name: 'Product', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'sales', name: 'Sales', semanticType: 'quantitative', analyticType: 'measure' },
  { fid: 'profit', name: 'Profit', semanticType: 'quantitative', analyticType: 'measure' },
];
 
function App() {
  return <GraphicWalker data={data} fields={fields} />;
}
 
export default App;

Das war's -- dies rendert einen vollstaendigen interaktiven Visualisierungseditor, in dem Benutzer Felder per Drag-and-Drop ziehen koennen, um Diagramme zu erstellen.

Felder verstehen

Jedes Feld benoetigt zwei Typangaben:

Semantischer Typ

Teilt Graphic Walker mit, welche Art von Daten dieses Feld enthaelt:

Semantischer TypVerwendung fuerBeispiele
quantitativeKontinuierliche ZahlenUmsatz, Temperatur, Anzahl
nominalUngeordnete KategorienProduktname, Land, Farbe
ordinalGeordnete KategorienBewertung (niedrig/mittel/hoch), Bildungsniveau
temporalDatum und UhrzeitBestelldatum, Zeitstempel

Analytischer Typ

Teilt Graphic Walker mit, wie das Feld in der Analyse verwendet werden soll:

Analytischer TypBedeutungVerhalten
dimensionGruppierungsfeldWird verwendet, um Daten in Kategorien aufzuteilen
measureAggregiertes FeldWird summiert, gemittelt, gezaehlt usw.

Faustregel: Wenn Sie in SQL GROUP BY verwenden wuerden, ist es eine dimension. Wenn Sie SUM() oder AVG() verwenden wuerden, ist es ein measure.

Daten aus CSV laden

Sie koennen jede CSV-Parsing-Bibliothek verwenden. Hier ein Beispiel mit Papa Parse (opens in a new tab):

import { GraphicWalker } from '@kanaries/graphic-walker';
import Papa from 'papaparse';
import { useState, useEffect } from 'react';
 
function App() {
  const [data, setData] = useState([]);
  const [fields, setFields] = useState([]);
 
  useEffect(() => {
    Papa.parse('/data.csv', {
      download: true,
      header: true,
      dynamicTyping: true,
      complete(results) {
        setData(results.data);
        // Auto-generate field definitions from columns
        const cols = Object.keys(results.data[0] || {});
        setFields(
          cols.map(col => ({
            fid: col,
            name: col,
            semanticType: typeof results.data[0][col] === 'number' ? 'quantitative' : 'nominal',
            analyticType: typeof results.data[0][col] === 'number' ? 'measure' : 'dimension',
          }))
        );
      },
    });
  }, []);
 
  if (!data.length) return <div>Loading...</div>;
  return <GraphicWalker data={data} fields={fields} />;
}

Vorkonfigurierte Diagramme hinzufuegen

Uebergeben Sie die chart-Prop, um bestimmte Visualisierungen anzuzeigen, wenn die Komponente geladen wird:

import { GraphicWalker } from '@kanaries/graphic-walker';
import type { IChart } from '@kanaries/graphic-walker';
 
const charts: IChart[] = [
  {
    visId: 'chart-1',
    name: 'Sales by Product',
    encodings: {
      dimensions: [],
      measures: [],
      rows: [{ fid: 'sales', name: 'Sales', analyticType: 'measure', semanticType: 'quantitative' }],
      columns: [{ fid: 'product', name: 'Product', analyticType: 'dimension', semanticType: 'nominal' }],
      color: [],
      opacity: [],
      size: [],
      shape: [],
      theta: [],
      radius: [],
      longitude: [],
      latitude: [],
      geoId: [],
      details: [],
      filters: [],
      text: [],
    },
    config: {
      defaultAggregated: true,
      geoms: ['bar'],
      coordSystem: 'generic',
      limit: -1,
    },
    layout: {
      showTableSummary: false,
      stack: 'stack',
      showActions: false,
      interactiveScale: false,
      zeroScale: true,
      size: { mode: 'auto', width: 800, height: 600 },
      format: {},
      resolve: {},
    },
  },
];
 
function App() {
  return <GraphicWalker data={data} fields={fields} chart={charts} />;
}

Dark Mode

Steuern Sie das Erscheinungsbild mit der appearance-Prop:

// Systemeinstellung folgen
<GraphicWalker data={data} fields={fields} appearance="media" />
 
// Immer hell
<GraphicWalker data={data} fields={fields} appearance="light" />
 
// Immer dunkel
<GraphicWalker data={data} fields={fields} appearance="dark" />

Naechste Schritte

Graphic WalkerGraphicWalker