Internationalisation

Graphic Walker inclut des traductions intégrées et prend en charge les ressources linguistiques personnalisées.

Langues intégrées

Code de langue	Langue
`en-US`	Anglais (par défaut)
`zh-CN`	Chinois (simplifié)
`ja-JP`	Japonais

Définir la langue

Utilisez la prop i18nLang :

<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="ja-JP"
/>

Traductions personnalisées

Fournissez vos propres traductions en utilisant la prop i18nResources. L'objet de ressources est indexé par code de langue, avec des clés de traduction imbriquées :

const customTranslations = {
  'fr-FR': {
    'main.tabpanel.DataSource': 'Source de données',
    'main.tabpanel.DataSource.btn': 'Ouvrir la source de données',
    'main.tabpanel.settings': 'Paramètres',
    // ... more keys
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="fr-FR"
  i18nResources={customTranslations}
/>

Remplacement des traductions intégrées

Vous pouvez remplacer des clés spécifiques dans une langue existante sans remplacer la traduction entière :

const overrides = {
  'en-US': {
    'main.tabpanel.DataSource': 'Data Input',
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="en-US"
  i18nResources={overrides}
/>

Trouver les clés de traduction

Les clés de traduction suivent une hiérarchie en notation pointée. L'ensemble complet des clés est disponible dans le code source de Graphic Walker (opens in a new tab). Consultez le fichier en-US.json pour la liste complète des chaînes traduisibles.

Exemple : Application multilingue

import { useState } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
 
const LANGUAGES = [
  { code: 'en-US', label: 'English' },
  { code: 'zh-CN', label: '中文' },
  { code: 'ja-JP', label: '日本語' },
];
 
function App() {
  const [lang, setLang] = useState('en-US');
 
  return (
    <div>
      <select value={lang} onChange={e => setLang(e.target.value)}>
        {LANGUAGES.map(l => (
          <option key={l.code} value={l.code}>{l.label}</option>
        ))}
      </select>
 
      <GraphicWalker
        data={data}
        fields={fields}
        i18nLang={lang}
      />
    </div>
  );
}