diff --git a/package.json b/package.json
index 4c237ad1c..ebb6bcd05 100644
--- a/package.json
+++ b/package.json
@@ -17,20 +17,26 @@
"comlink": "^4.3.0",
"d3": "^6.5.0",
"dayjs": "^1.8.33",
+ "i18next": "^21.3.3",
+ "i18next-browser-languagedetector": "^6.1.2",
+ "i18next-chained-backend": "^3.0.2",
+ "i18next-resources-to-backend": "^1.0.0",
"lit-html": "^1.3.0",
"lodash": "^4.17.15",
"rdf-literal": "^1.2.0",
- "react": "^16.13.1",
+ "react": "^17.0.2",
"react-bootstrap": "^1.5.0",
"react-color": "2.17.3",
"react-cookie-consent": "^6.2.3",
+ "react-country-flag": "^3.0.1",
"react-data-grid": "^7.0.0-canary.16",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
- "react-dom": "^16.13.1",
+ "react-dom": "^17.0.2",
"react-dropzone": "^11.0.3",
+ "react-i18next": "^11.13.0",
"react-icons": "^3.10.0",
- "react-scripts": "3.4.1",
+ "react-scripts": "^4.0.3",
"sparql-http-client": "^2.4.0",
"sparqljs": "^3.5.1",
"typeface-inter": "^3.12.0",
diff --git a/src/App.js b/src/App.js
index 1dab5892d..19bf2d7c6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,8 +22,7 @@ import { serializeProject } from '@rawgraphs/rawgraphs-core'
import useDataLoader from './hooks/useDataLoader'
import isPlainObject from 'lodash/isPlainObject'
import CookieConsent from 'react-cookie-consent'
-
-// #TODO: i18n
+import { useTranslation } from 'react-i18next'
function App() {
const dataLoader = useDataLoader()
@@ -162,15 +161,17 @@ function App() {
setVisualOptions(getDefaultOptionsValues(options))
}, [])
+ const { t } = useTranslation()
+
return (
-
+
{data && (
-
+
{
+ const lazyt = useLazyTranslation()
return (
{label}
@@ -28,7 +30,7 @@ const ChartOptionSelect = ({
{options.map((option) =>
isObject(option) ? (
) : (