feat: add i18n (#13)

gravity-ui · Jun 30, 2022 · 3f0204b · 3f0204b
1 parent aba5148
commit 3f0204b
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 40 deletions.
diff --git a/src/components/ErrorView/ErrorView.tsx b/src/components/ErrorView/ErrorView.tsx
@@ -1,19 +1,16 @@
 import React from 'react';
 import block from 'bem-cn-lite';
-import {dict} from '../../dict/dict';
-import {settings} from '../../libs';
+import {i18n} from '../../i18n';
 
 import './ErrorView.scss';
 
 const b = block('chartkit-error');
 
 export const ErrorView = () => {
-    const lang = settings.get('lang');
-
     return (
         <div className={b()}>
-            <div className={b('title')}>{dict(lang, 'error')}</div>
-            <div className={b('message')}>{dict(lang, 'error-unknown-extension')}</div>
+            <div className={b('title')}>{i18n('common', 'error')}</div>
+            <div className={b('message')}>{i18n('common', 'error-unknown-extension')}</div>
         </div>
     );
 };
diff --git a/src/dict/dict.ts b/src/dict/dict.ts
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -0,0 +1,18 @@
+import {I18N, I18NFn} from '@yandex-cloud/i18n';
+import type {ChartKitLang} from '../types';
+import en from './keysets/en.json';
+import ru from './keysets/ru.json';
+
+type Keysets = typeof en;
+type TypedI18n = I18NFn<Keysets>;
+
+const i18nFactory = new I18N();
+const EN: ChartKitLang = 'en';
+const RU: ChartKitLang = 'ru';
+
+i18nFactory.registerKeysets(EN, en);
+i18nFactory.registerKeysets(RU, ru);
+
+const i18n = i18nFactory.i18n.bind(i18nFactory) as TypedI18n;
+
+export {i18nFactory, i18n};
diff --git a/src/i18n/keysets/en.json b/src/i18n/keysets/en.json
@@ -0,0 +1,8 @@
+{
+  "common": {
+    "error": "Error",
+    "error-unknown-extension": "Unknown chart type",
+    "tooltip-sum": "Sum",
+    "tooltip-rest": "Rest"
+  }
+}
diff --git a/src/i18n/keysets/ru.json b/src/i18n/keysets/ru.json
@@ -0,0 +1,8 @@
+{
+  "common": {
+    "error": "Ошибка",
+    "error-unknown-extension": "Неизвестный тип чарта",
+    "tooltip-sum": "Сумма",
+    "tooltip-rest": "Остальные"
+  }
+}
diff --git a/src/libs/settings/settings.ts b/src/libs/settings/settings.ts
@@ -1,5 +1,6 @@
 import moment from 'moment';
-import {ChartKitPlugin, ChartKitLang} from '../../types';
+import {i18nFactory} from '../../i18n';
+import type {ChartKitPlugin, ChartKitLang} from '../../types';
 
 type Settings = {
     plugins: ChartKitPlugin[];
@@ -24,6 +25,7 @@ const updateLocale = (args: {lang: ChartKitLang; locale?: moment.LocaleSpecifica
     const {lang, locale} = args;
     moment.updateLocale(lang, locale);
     moment.locale(lang);
+    i18nFactory.setLang(lang);
 };
 
 class ChartKitSettings {

diff --git a/src/plugins/yagr/renderer/tooltip/tooltip.ts b/src/plugins/yagr/renderer/tooltip/tooltip.ts
@@ -1,6 +1,8 @@
-import './tooltip.scss';
+import {i18n} from '../../../../i18n';
 import {escapeHTML} from './helpers/escapeHTML';
 
+import './tooltip.scss';
+
 export const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
 export const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
 export const TOOLTIP_CONTAINER_CLASS_NAME = '_tooltip';
@@ -10,8 +12,6 @@ export const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
 export const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
 export const TOOLTIP_FOOTER_CLASS_NAME = '_tooltip-footer';
 
-import {dict} from '../../../../dict/dict';
-
 /* eslint-disable complexity */
 type Tooltip = any;
 
@@ -227,7 +227,7 @@ const renderDiffCell = (line: TooltipLine) =>
         ${line.diff ? ` (${line.diff})` : ''}
     </td>`;
 
-function renderAdditionalSection(data: TooltipData, splitTooltip = false, colspanNumber = 1) {
+const renderAdditionalSection = (data: TooltipData, splitTooltip = false, colspanNumber = 1) => {
     return `<td class="_tooltip-right__td ${
         splitTooltip ? '_tooltip-right__td_with-split-tooltip' : ''
     }" colspan="${colspanNumber || 1}">
@@ -270,7 +270,7 @@ function renderAdditionalSection(data: TooltipData, splitTooltip = false, colspa
                     : ''
             }
         </td>`;
-}
+};
 
 const renderRow = (
     line: TooltipLine,
@@ -379,12 +379,11 @@ const renderRow = (
         }`;
 };
 
-export function formatTooltip(data: TooltipData, tooltip: Tooltip) {
+export const formatTooltip = (data: TooltipData, tooltip: Tooltip) => {
     const {splitTooltip, activeRowAlwaysFirstInTooltip} = data;
     const selectedLineIndex = data.lines.findIndex(({selectedSeries}) => selectedSeries);
     const selectedLine = data.lines[selectedLineIndex];
     const lines = data.lines.slice(0, (tooltip.lastVisibleRowIndex || data.lines.length) + 1);
-    const locale = tooltip.options.locale;
 
     const cellsRenderers = [];
     cellsRenderers.push(renderColorCell);
@@ -500,7 +499,7 @@ export function formatTooltip(data: TooltipData, tooltip: Tooltip) {
                                             <td colspan="${
                                                 cellsRenderers.length - 1
                                             }" class="_hidden-rows-number">
-                                                ${dict(locale, 'tooltip-rest')} ${
+                                                ${i18n('common', 'tooltip-rest')} ${
                                               data.hiddenRowsNumber
                                           }
                                             </td>
@@ -518,7 +517,7 @@ export function formatTooltip(data: TooltipData, tooltip: Tooltip) {
                                         ? `<tr class="_tooltip-rows__summ-tr">
                                             <td class="_tooltip-rows__summ-td" colspan="${
                                                 cellsRenderers.length - 1
-                                            }">${dict(locale, 'tooltip-sum')}</td>
+                                            }">${i18n('common', 'tooltip-sum')}</td>
                                             <td class="_tooltip-rows__summ-td _tooltip-rows__summ-td-value">
                                                 ${data.sum}
                                             </td>
@@ -539,4 +538,4 @@ export function formatTooltip(data: TooltipData, tooltip: Tooltip) {
         </tr>
     </table>
 </div>`;
-}
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,8 @@
     "jsx": "react",
     "baseUrl": ".",
     "importHelpers": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "resolveJsonModule": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }