FAQ

Général

Qu'est-ce que Graphic Walker ?

Graphic Walker est un composant React open source pour la visualisation interactive de données. Il fournit une interface de type Tableau en glisser-déposer pour créer des graphiques, propulsé par une approche de grammaire des graphiques. Contrairement aux plateformes BI traditionnelles, il s'intègre directement dans votre application React (ou tout autre framework web).

Quelle licence utilise Graphic Walker ?

Graphic Walker est publié sous la Licence Apache-2.0 (opens in a new tab).

Quels navigateurs sont pris en charge ?

Graphic Walker fonctionne dans tous les navigateurs modernes : Chrome, Firefox, Safari et Edge (deux dernières versions). Internet Explorer n'est pas pris en charge.

Quelle est la taille du bundle ?

Le package @kanaries/graphic-walker fait environ 1,5 Mo minifié (incluant le moteur de rendu Vega-Lite). Avec la compression gzip, la taille de transfert est d'environ 400 Ko.

Peut-on utiliser Graphic Walker sans React ?

Oui. Le package exporte les fonctions embedGraphicWalker, embedGraphicRenderer, embedPureRenderer et embedTableWalker qui montent les composants dans n'importe quel élément DOM. Consultez la documentation Intégration Vanilla JS.

Données

Quelle quantité de données Graphic Walker peut-il gérer ?

En mode côté client (en passant la prop data), les performances dépendent de la mémoire du navigateur. En guide indicatif :

Pour les grands jeux de données, utilisez la prop computation pour déléguer le traitement à votre serveur.

Quels formats de données sont pris en charge ?

Graphic Walker accepte les données sous forme de tableau d'objets JavaScript (Record<string, any>[]). Vous pouvez convertir depuis n'importe quel format :

• CSV : Utilisez Papa Parse (opens in a new tab) ou le téléchargement de fichier intégré
• JSON : Analysez directement
• Base de données : Interrogez votre base de données et passez les résultats à la prop computation
• API : Récupérez les données et passez-les à la prop data

Peut-on se connecter directement à une base de données ?

Pas directement depuis le composant navigateur. Utilisez le mode de calcul côté serveur : implémentez une fonction computation qui interroge votre base de données et retourne les résultats. Consultez le Guide du calcul.

Rendu

Graphic Walker prend-il en charge le SSR (Server-Side Rendering) ?

Graphic Walker nécessite un environnement navigateur pour le rendu. Dans les frameworks SSR comme Next.js, utilisez les imports dynamiques avec ssr: false :

import dynamic from 'next/dynamic';
 
const GraphicWalker = dynamic(
  () => import('@kanaries/graphic-walker').then(m => m.GraphicWalker),
  { ssr: false }
);

Peut-on utiliser SVG au lieu de Canvas pour le rendu ?

Oui. Définissez useSvg: true dans la configuration de mise en page ou la prop defaultConfig :

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: { useSvg: true },
  }}
/>

Le rendu SVG produit une sortie plus nette mais peut être plus lent pour les grands jeux de données.

Comment définir une taille de graphique fixe ?

Utilisez la prop defaultConfig :

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: {
      size: { mode: 'fixed', width: 800, height: 600 },
    },
  }}
/>

Personnalisation

Peut-on masquer des parties de l'interface ?

Oui. Utilisez ces props pour contrôler la visibilité de l'interface :

Comment sauvegarder et restaurer les configurations de graphiques ?

La prop chart accepte IChart[] — un tableau de spécifications de graphiques. Sauvegardez ce tableau dans votre backend ou localStorage, et repassez-le pour restaurer l'état :

// Save
const charts = storeRef.current?.exportAllCharts();
localStorage.setItem('gw-charts', JSON.stringify(charts));
 
// Restore
const saved = JSON.parse(localStorage.getItem('gw-charts') || '[]');
<GraphicWalker data={data} fields={fields} chart={saved} />

Dépannage

Les graphiques ne s'affichent pas — zone blanche vide

Causes courantes :

1. Données manquantes : Assurez-vous que data est un tableau non vide
2. Champs manquants : Assurez-vous que le tableau fields correspond aux clés de vos données
3. Problème SSR : Si vous utilisez Next.js, importez avec ssr: false (voir ci-dessus)
4. Taille du conteneur : L'élément parent doit avoir une hauteur définie

Erreurs "Field not found"

Assurez-vous que les valeurs fid dans votre tableau fields correspondent exactement aux noms de propriétés dans vos objets de données. Les identifiants de champs sont sensibles à la casse.

Le mode sombre ne fonctionne pas

Assurez-vous d'utiliser la prop appearance (et non la prop dépréciée dark) :

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

Les performances sont lentes

• Réduisez la taille du jeu de données ou passez au calcul côté serveur
• Désactivez le profilage avec hideProfiling={true}
• Utilisez le rendu Canvas (par défaut) au lieu de SVG