Theming & Erscheinungsbild

Graphic Walker bietet mehrere Ebenen der visuellen Anpassung: Dark Mode, Diagramm-Rendering-Themes und vollstaendige UI-Farbanpassung.

Dark Mode

Steuern Sie den Dark Mode mit der appearance-Prop:

// Follow user's OS preference (default)
<GraphicWalker appearance="media" />
 
// Always light
<GraphicWalker appearance="light" />
 
// Always dark
<GraphicWalker appearance="dark" />

Diagramm-Themes

Die vizThemeConfig-Prop steuert, wie Diagramme gerendert werden. Waehlen Sie ein integriertes Theme oder uebergeben Sie ein benutzerdefiniertes Vega-Konfigurationsobjekt:

Integrierte Themes

Theme	Beschreibung
`'vega'`	Standard-Vega-Lite-Theme
`'g2'`	Von G2 (AntV) inspiriertes Theme
`'streamlit'`	Von Streamlit inspiriertes Theme

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

Benutzerdefinierte Vega-Konfiguration

Uebergeben Sie ein vollstaendiges Vega/Vega-Lite-Konfigurationsobjekt fuer detaillierte Kontrolle ueber das Diagramm-Rendering:

const customTheme = {
  arc: { fill: '#4c78a8' },
  area: { fill: '#4c78a8' },
  bar: { fill: '#4c78a8' },
  line: { stroke: '#4c78a8' },
  point: { fill: '#4c78a8' },
  axis: {
    domainColor: '#888888',
    gridColor: '#e0e0e0',
    tickColor: '#888888',
  },
};
 
<GraphicWalker vizThemeConfig={customTheme} data={data} fields={fields} />

Benutzerdefinierte UI-Farben

Die uiTheme-Prop ermoeglicht es Ihnen, die UI-Elemente (Schaltflaechen, Panels, Text) getrennt vom Diagramm-Theme anzupassen. Sie akzeptiert ein IUIThemeConfig mit Farbsaetzen fuer sowohl hellen als auch dunklen Modus:

const uiTheme = {
  light: {
    background: '#ffffff',
    foreground: '#1a1a1a',
    primary: '#6366f1',
    'primary-foreground': '#ffffff',
    muted: '#f1f5f9',
    'muted-foreground': '#64748b',
    border: '#e2e8f0',
    ring: '#6366f1',
  },
  dark: {
    background: '#0f172a',
    foreground: '#f8fafc',
    primary: '#818cf8',
    'primary-foreground': '#0f172a',
    muted: '#1e293b',
    'muted-foreground': '#94a3b8',
    border: '#334155',
    ring: '#818cf8',
  },
};
 
<GraphicWalker uiTheme={uiTheme} data={data} fields={fields} />

Farbsatz-Eigenschaften

Eigenschaft	Erforderlich	Beschreibung
`background`	Ja	Seiten-/Komponenten-Hintergrundfarbe
`foreground`	Ja	Primaere Textfarbe
`primary`	Ja	Primaere Aktionsfarbe (Schaltflaechen, Links)
`primary-foreground`	Ja	Text auf primaer gefaerbten Elementen
`muted`	Ja	Gedaempfte Hintergruende (ausgewaehlte Elemente, Trennlinien)
`muted-foreground`	Ja	Beschreibungs-/Sekundaertextfarbe
`border`	Ja	Rahmenfarbe fuer Container
`ring`	Ja	Fokusringfarbe
`card`	Nein	Kartenhintergrund (Standard: `background`)
`card-foreground`	Nein	Kartentextfarbe (Standard: `foreground`)
`popover`	Nein	Popover-Hintergrund (Standard: `background`)
`popover-foreground`	Nein	Popover-Textfarbe (Standard: `foreground`)
`secondary`	Nein	Sekundaerer Schaltflaechen-Hintergrund (Standard: `muted`)
`secondary-foreground`	Nein	Sekundaerer Schaltflaechentext (Standard: `primary`)
`accent`	Nein	Hover-Zustand-Hintergrund (Standard: `muted`)
`accent-foreground`	Nein	Hover-Zustand-Text (Standard: `primary`)
`destructive`	Nein	Gefahr-/Loeschaktionsfarbe
`destructive-foreground`	Nein	Text auf destruktiven Elementen
`dimension`	Nein	Dimensionsfeld-Badge-Farbe
`measure`	Nein	Messwertfeld-Badge-Farbe
`input`	Nein	Eingabe-Rahmenfarbe (Standard: `border`)

Farbpaletten

Steuern Sie die in der Diagrammkodierung verwendete Farbpalette mit der Eigenschaft colorPalette in IVisualLayout, oder verwenden Sie die scales-Prop fuer kanalspezifische Steuerung.

Kategoriale Paletten

Fuer nominale Daten: accent, category10, category20, category20b, category20c, dark2, paired, pastel1, pastel2, set1, set2, set3, tableau10, tableau20

Sequentielle Einfarbton-Paletten

Fuer ansteigende quantitative Werte: blues, tealblues, teals, greens, browns, oranges, reds, purples, warmgreys, greys

Sequentielle Mehrfarbton-Paletten

Fuer quantitative Daten in Heatmaps: viridis, magma, inferno, plasma, cividis, turbo, bluegreen, bluepurple, goldgreen, goldorange, goldred, greenblue, orangered, purplebluegreen, purpleblue, purplered, redpurple, yellowgreenblue, yellowgreen, yelloworangebrown, yelloworangered, darkblue, darkgold, darkgreen, darkmulti, darkred, lightgreyred, lightgreyteal, lightmulti, lightorange, lighttealblue

Divergierende Paletten

Fuer Daten mit einem bedeutungsvollen Mittelpunkt: blueorange, brownbluegreen, purplegreen, pinkyellowgreen, purpleorange, redblue, redgrey, redyellowblue, redyellowgreen, spectral

Zyklische Paletten

Fuer periodische Muster: rainbow, sinebow

Beispiel fuer benutzerdefinierte Skalen

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: {
      scheme: 'tableau10',
    },
    size: {
      rangeMin: 10,
      rangeMax: 100,
    },
  }}
/>

Skalen koennen auch Funktionen sein, die Feldinformationen erhalten:

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: (info) => ({
      scheme: info.semanticType === 'nominal' ? 'tableau10' : 'viridis',
    }),
  }}
/>

Diagrammtypen Datenberechnung