Thèmes et apparence

Graphic Walker offre plusieurs niveaux de personnalisation visuelle : le mode sombre, les thèmes de rendu des graphiques et la personnalisation complète des couleurs de l'interface.

Mode sombre

Contrôlez le mode sombre avec la prop appearance :

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

Thèmes de graphiques

La prop vizThemeConfig contrôle le rendu des graphiques. Choisissez un thème intégré ou fournissez un objet de configuration Vega personnalisé :

Thèmes intégrés

Thème	Description
`'vega'`	Thème Vega-Lite par défaut
`'g2'`	Thème inspiré de G2 (AntV)
`'streamlit'`	Thème inspiré de Streamlit

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

Configuration Vega personnalisée

Passez un objet complet de configuration Vega/Vega-Lite pour un contrôle granulaire du rendu des graphiques :

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

Couleurs d'interface personnalisées

La prop uiTheme vous permet de personnaliser les éléments d'interface (boutons, panneaux, texte) séparément du thème des graphiques. Elle accepte un IUIThemeConfig avec des jeux de couleurs pour les modes clair et sombre :

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

Propriétés du jeu de couleurs

Propriété	Requis	Description
`background`	Oui	Couleur de fond de la page/du composant
`foreground`	Oui	Couleur du texte principal
`primary`	Oui	Couleur d'action principale (boutons, liens)
`primary-foreground`	Oui	Texte sur les éléments de couleur principale
`muted`	Oui	Fonds atténués (éléments sélectionnés, séparateurs)
`muted-foreground`	Oui	Couleur du texte de description/secondaire
`border`	Oui	Couleur de bordure des conteneurs
`ring`	Oui	Couleur de l'anneau de focus
`card`	Non	Fond de carte (par défaut `background`)
`card-foreground`	Non	Couleur du texte de carte (par défaut `foreground`)
`popover`	Non	Fond de popover (par défaut `background`)
`popover-foreground`	Non	Couleur du texte de popover (par défaut `foreground`)
`secondary`	Non	Fond de bouton secondaire (par défaut `muted`)
`secondary-foreground`	Non	Texte de bouton secondaire (par défaut `primary`)
`accent`	Non	Fond d'état de survol (par défaut `muted`)
`accent-foreground`	Non	Texte d'état de survol (par défaut `primary`)
`destructive`	Non	Couleur d'action danger/suppression
`destructive-foreground`	Non	Texte sur les éléments destructifs
`dimension`	Non	Couleur du badge de champ dimension
`measure`	Non	Couleur du badge de champ mesure
`input`	Non	Couleur de bordure d'entrée (par défaut `border`)

Palettes de couleurs

Contrôlez la palette de couleurs utilisée dans l'encodage des graphiques avec la propriété colorPalette dans IVisualLayout, ou utilisez la prop scales pour un contrôle par canal.

Palettes catégorielles

Pour les données nominales : accent, category10, category20, category20b, category20c, dark2, paired, pastel1, pastel2, set1, set2, set3, tableau10, tableau20

Séquentielles mono-teinte

Pour les valeurs quantitatives croissantes : blues, tealblues, teals, greens, browns, oranges, reds, purples, warmgreys, greys

Séquentielles multi-teintes

Pour les données quantitatives dans les cartes de chaleur : 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

Divergentes

Pour les données avec un point médian significatif : blueorange, brownbluegreen, purplegreen, pinkyellowgreen, purpleorange, redblue, redgrey, redyellowblue, redyellowgreen, spectral

Cycliques

Pour les motifs périodiques : rainbow, sinebow

Exemple d'échelles personnalisées

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

Les échelles peuvent également être des fonctions qui reçoivent les informations du champ :

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

Types de graphiques Calcul de données