UIの翻訳
Pivotick は独自のテキストを書き込みます: レール、メニュー、サイドバー、テーブル、ピボット パネル、 歴史、トースト、そしてその背後にあるすべての title ツールチップと aria-label。 i18n オプションを使用すると、すべてがあなたの言語で表示されます。
const graph = new Pivotick(container, data, {
i18n: { locale: 'fr' },
})ライブラリに渡したテキストは指定されたとおりに描画され、検索されることはありません: ノードとエッジ ラベル、ファセットと凡例のラベル、ピボット名、レール モード、ドック タブ、トップバーのアクション、 コンテキスト メニューに追加する行。渡す前に翻訳してください。
バンドルされている言語
すべてのビルドには、組み込み UI の完全な翻訳が含まれています。
| 言語 | ロケール | 地域タグの例 |
|---|---|---|
| 英語 (デフォルト) | en | en-GB, en-US |
| 簡体字中国語 | zh | zh-CN, zh-Hans |
| フランス語 | fr | fr-FR, fr-CA |
| ドイツ語 | de | de-DE, de-CH |
| ポルトガル語 | pt | pt-BR, pt-PT |
| オランダ語 | nl | nl-NL, nl-BE |
| 日本語 | ja | ja-JP |
| アラビア語 | ar | ar-EG, ar-SA |
| スペイン語 | es | es-ES, es-MX |
1 つを選択するには、i18n.locale を設定します。地域タグは同じ言語カタログを使用しますが、 独自の数値フォーマット、並べ替え、および複数のルールを保持します。中国のカタログ 簡体字を使用します。別途繁体字中国語の翻訳はありません。ロケール 同梱のカタログがない場合は、messages または translate を指定しない限り、英語が使用されます。 locale を省略すると、既存の英語のデフォルトが維持されます。ブラウザの言語が検出されません。
カタログは、messagesEn、messagesZh、messagesFr、messagesDe、 messagesPt、messagesNl、messagesJa、messagesAr、messagesEs として一緒に bundledMessages、ブラウザ ビルドでは Pivotick でも利用可能です。
オプション
| プロパティ | 種類 | デフォルト | 説明 |
|---|---|---|---|
locale | string | 'en' | 'fr'、'de-CH'、'pt-BR' などの BCP 47 タグ。複数のルール、数値の書き方、リストの並べ替え方法が選択されます。指定すると、グラフのルートの lang としても設定されます。 |
messages | Partial<Messages> | {} | キーによってオーバーライドします。キーが見つからない場合は、バンドルされた言語が使用され、次に英語が使用されます。 |
translate | (key, params, fallback) => string | undefined | messages が持っていないすべてのキーを要求される、独自の翻訳ライブラリへのブリッジ。 |
言語はグラフの作成時に設定されます。切り替えるには、graph.destroy() を呼び出してビルドします 新しいオプションを使用してグラフを再度表示します。
メッセージの見つけ方
各テキストは次の順序で検索され、最初の回答が優先されます。
- 機能自体のオプション、1 つがある場合:
UI.emptyState.render、UI.busyIndicator.label、UI.simplify.typeLabel、またはtitleとconfirmLabelあなたctx.confirm()に進みます。これらはどのカタログよりも具体的です。 messages、キーのテーブル。translate、あなたの橋。- バンドル言語、
localeによって選択されます。 - 英語、その言語にバンドルされたカタログがない場合。
部分的なオーバーライドがサポートされています。アプリケーションが必要とする用語のみを変更し、残りは変更します。 選択した言語を使用します。サポートされていない言語は、警告なしに英語になります。
キーとメッセージ
すべてのメッセージには、メッセージが表示される場所にちなんで名付けられた安定したドット付きキーがあります。 'contextMenu.node.pin'、'history.menu.empty'、'sidebar.neighbors.connections'。鍵 英語のカタログから入力されているため、TypeScript ではスペルミスのキーがあるとコンパイルに失敗し、 残りは編集者が仕上げます。
メッセージは 3 つの形式のいずれかになります。
プレースホルダーを含むテキスト
{name} に値が入る文字列:
messages: {
'search.result.inGroup': 'dans {group}',
'history.menu.count': '{count} sur {limit}',
}数値は、入力される前にロケールで記述される方法で書き込まれます: 'en' の下に 1,234、 'de'の下に1.234、'fr'の下に1 234。書いた通りに文字列が入ります。
複数形
カウントに依存するメッセージは、複数のカテゴリごとに 1 つのエントリを持つオブジェクトです。 言語の使い方。カテゴリはブラウザの count パラメータから選択されます Intl.PluralRules したがって、ルールは CLDR がロケールに対して定義するルールです。 otherは どの言語にもそれがあるため、必須です。
// English and French need two forms; French counts zero as one
'count.nodes': { one: '{count} nœud', other: '{count} nœuds' },
// Polish needs four: 1 węzeł, 3 węzły, 5 węzłów, 1,5 węzła
'count.nodes': { one: '{count} węzeł', few: '{count} węzły', many: '{count} węzłów', other: '{count} węzła' },カテゴリは、zero、one、two、few、many、otherです。言語が行う形式 使用しないものは選択されず、不足しているものは other に戻ります。
Fallback English は、どのロケールでも英語の複数規則を維持します。たとえば、サポートされていない ゼロを単数として扱う言語は、英語のフォールバックから「0 ノード」を取得します。
関数
テンプレートで言えないことについては、メッセージは生のパラメータと グラフの I18n:
'simplify.typeLabel': ({ count, type }, i18n) =>
`${i18n.formatNumber(Number(count))} ${type === 'ip' ? 'adresses IP' : type}`,どのような形式であっても、メッセージはテキストです。これはテキストとして挿入され、HTML として解析されることはないため、<b> 書いてある通りに表示されます。
PO 翻訳ファイルの編集
リポジトリの locales/ ディレクトリには、gettext テンプレート、pivotick.pot が含まれており、 zh.po、fr.po、de.po、pt.po、nl.po、ja.po、ar.po、es.po ファイル。これらのファイルは npm パッケージにも同梱されています。 Poedit または任意の UTF-8 テキスト エディタで .po ファイルを開きます。それぞれの msgctxt は安定したメッセージ キーです。 msgid は英語のソース、msgstr は翻訳です。 {placeholders} はそのままにしておきます。 複数のエントリの場合、msgstr[n] スロットごとに翻訳します: 中国語と日本語には other があります のみ。アラビア語には、zero、one、two、few、many、そしてotherがあります。フランス語、ドイツ語、 ポルトガル語、オランダ語、スペイン語には one の次に other があります。ランタイムは Intl.PluralRules を使用します。 欠落しているカテゴリは gettext ヘッダーを JavaScript として評価するのではなく、other に戻ります。
npm ci が完了したソース チェックアウトから:
# Refresh the template and merge English changes into the PO files
npm run i18n:extract
# Edit locales/*.po, finish empty entries and review any fuzzy translations
# Compile PO files into the TypeScript catalogues used by every build
npm run i18n:compile
# Check completeness, source text, placeholders, plurals and generated files
npm run i18n:check
npm run test:i18nPO ファイル、テンプレート、生成された src/i18n/locales/*.ts ファイルを一緒にコミットします。編集しないでください 生成されたファイルを直接取得します。抽出では既存の翻訳とトランスレータが保持されます コメントを追加し、変更された英語テキストを fuzzy としてマークし、新しいエントリは空のままにします。それらを解決してください コンパイル前のエントリ。削除されたキーはアクティブなカタログから削除されます。 npm run build は i18n:check を実行するため、不完全な翻訳または生成されたカタログが古いと失敗します。 構築します。これらのコマンドは、既存のノードの依存関係を使用します。システム gettext のインストールは必要ありません。
別の言語をバンドルするには、そのロケールと複数スロットのマッピングを scripts/i18n.mjs に追加します。 新しい PO ファイルを抽出して翻訳し、コンパイルして、生成されたカタログを src/i18n/locales/index.ts をbundledMessages に追加します。アプリケーション専用言語の場合、 カタログを i18n.messages として渡すことは、Pivotick を変更せずに引き続き機能します。
messagesEn {#catalogue} からカタログを開始します
英語のカタログは ES ビルドから messagesEn としてエクスポートされ、 ブラウザのビルドからPivotick.messagesEn。すべてのキーを英語のテキストで保持しており、 これはプレーン データなので、翻訳者が開始するファイルとして書き出すことができます。
import { messagesEn } from 'pivotick'
console.log(JSON.stringify(messagesEn, null, 4))翻訳されたファイルを messages としてロードし直します。 TypeScript で、カタログは次のように宣言されました satisfies Messages はすべてのキーに名前を付ける必要があるため、後のリリースで追加されたキーは 迷子の英語文字列としてではなく、コンパイル エラーになります。
import type { Messages } from 'pivotick'
export const messagesFr = {
'count.nodes': { one: '{count} nœud', other: '{count} nœuds' },
// …every other key
} satisfies Messages代わりに Partial<Messages> を使用して翻訳してください。
独自の翻訳ライブラリの橋渡し
アプリケーションがすでにライブラリを通じて翻訳している場合、translate は 1 つのソースを保持します。 真実と一つの言語切り替え。これは、messages が持たないすべてのキーに対して次のように呼び出されます。
key:'count.nodes'などのメッセージキー。params: フォーマットされていない数値を含む生の値、つまりライブラリ独自の複数形と数値 規則が適用されます。fallback: 英語のテキスト。すでに入力されています。
それを使用する場合は文字列を返すか、バンドルされている言語を使用してから英語を使用する場合は undefined を返します。 ここでは i18next を使用します。その count パラメータはすでに複数形を駆動しています。
const graph = new Pivotick(container, data, {
i18n: {
locale: i18next.language,
translate: (key, params, fallback) => {
const found = i18next.exists(`pivotick.${key}`)
return found ? i18next.t(`pivotick.${key}`, params) : undefined
},
},
})次に、リソース ファイルはライブラリ独自の構文でメッセージを書き込みます。 (i18next では "{{count}} nœuds")、同じキーの下にあります。
スローする translate がキャッチされます。コンソールには、どのキーとバンドルされている言語が示されます。 (サポートされていない言語の場合は英語) が表示されます。フックは依然として英語をそのまま受け入れます fallback 引数、ブリッジコントラクトを維持します。 messages と translate が両方ともキーを持っている場合、messages が勝ち、translate は問われません。
数字、リスト、並べ替え、および lang
locale は言葉以上のものをカバーします。その下に:
- カウントは
Intl.NumberFormatで表記されます:英語では「1,234 ノード」、英語では「1.234 Knoten」 ドイツ人。フォールバック英語では、選択したロケールの数値形式も使用されます。 - 一文中の名前のリストは、
Intl.ListFormat:「a、b、c」、「a、b et」で結合されます。 c」。 - テーブル内のソート、近隣リストおよびピボットトリアージペインは
Intl.Collatorを使用します。 したがって、「Émile」は「Emma」の横に並べ替えられ、スウェーデン語では「ä」が「z」の後に配置され、「item 10」がその後に配置されます。 「項目9」。
locale を宣言すると、グラフのルート要素はそれを lang として取得し、各部分も同様に取得します。 ライブラリはルートの外側にマウントされます (ツールヒント、ドロップダウン、提案リスト)。スクリーンリーダー インターフェイスを適切な音声で読み上げます。 locale がなければ、lang は設定されません。ライブラリの テキストは英語ですが、グラフ内のデータはページの言語であり、ページの言語です。 自分の lang がそれを最もよく表しています。
右から左へのレイアウトはサポートされていません。dir 処理はなく、インターフェイスは配置されます。 すべての言語で左から右へ。
グラフごとに 1 つの言語
各グラフには独自の言語があります。 1 ページ上の 2 つのグラフでは 2 つの言語を使用できますが、どちらも使用できません。 他にも影響を及ぼします。
グラフ内のグラフはその親のグラフ、つまりクラスター内に描画されたサブグラフ、および小さなグラフを話します。 サイドバーの近傍グラフ。
ライブラリがデータに書き込むテキストは、グラフの言語 (履歴) で一度書き込まれます。 エントリのラベル (「Hid 3 Nodes」) と新しいメモが始まる本文。グラフを再構築する 別の言語ではそれらがそのまま残されます。
コード内: graph.i18n およびプラグイン
graph.i18n はグラフの言語で、ライブラリが書き込むオブジェクトと同じです。
| メンバー | 何をするのか |
|---|---|
locale | 使用中のタグ: あなたのタグ、または 'en'。 |
t(key, params?) | 上記の lookup を介した組み込みメッセージのテキスト。 |
formatNumber(value, options?) | ロケールの数字の数値。 Intl.NumberFormat オプションを取ります。 |
formatList(items, options?) | 項目が文として結合されました。 Intl.ListFormat オプションを取ります。 |
compare(a, b) | ロケールの順序のコンパレータ。そのまま sort に渡しても安全です。 |
collator(options?) | compare の後ろの Intl.Collator は、デフォルトでは数値です。 |
プラグイン は、ctx.i18n と同じオブジェクトを読み取ります。プラグイン自体が書き込むテキストは次のとおりです 翻訳するプラグインは ctx.i18n.locale をキーにします。カウントのフォーマットと並べ替え ctx.i18n までのリストは、グラフの残りの部分との一貫性を保ちます。
const nodeCounter = {
name: 'node-counter',
install(ctx) {
const words = { fr: 'Total', de: 'Gesamt' }
const label = words[ctx.i18n.locale.split('-')[0]] ?? 'Total'
const count = ctx.i18n.formatNumber(ctx.graph.getNodes().length)
// …draw `${label}: ${count}`
},
}そのままのもの
- あなたのデータ。 ノードとエッジのラベル、プロパティ名と値がそのまま描画されます。あ ラベルが宣言されていないプロパティ名は、そのキーからタイトル大文字に変換されます (
first_seenは読み取ります) 「初めて見た」);nodePropertiesMapまたはedgePropertiesMapを宣言して名前を付けます それをあなたの言語で。プロパティ リストが独自のキーの上に追加するid行は、そのキーとして書き込まれます。 です。 - 開発者向けテキスト。 コンソールの警告とスローされたエラーは英語のままです。
- キーグリフ。
⌃ ⇧ ⌥ ⌘はそのまま表示されます。キー名はメッセージです (keys.ctrlCombo、keys.escape) したがって、ドイツ語のインターフェイスではStrg+Zと言えます。 - ノードのリム (
2k、99+) のバッジ カウント は 3 文字に収まる必要があります。