diff --git a/src/UIComponents/ColumnDetailsCategorical.tsx b/src/UIComponents/ColumnDetailsCategorical.tsx
index 0b9ae0b6..4c51dc5e 100644
--- a/src/UIComponents/ColumnDetailsCategorical.tsx
+++ b/src/UIComponents/ColumnDetailsCategorical.tsx
@@ -3,6 +3,7 @@ import { connect } from "react-redux";
import { RootState } from "../redux";
import { colors, styles } from "../constants";
import { Bar } from "react-chartjs-2";
+import { getLocalizedValue } from "../helpers/valueDetails";
import {
getCategoricalColumnDetails
} from "../selectors/currentColumnSelectors";
@@ -29,9 +30,10 @@ const chartOptions = {
const ColumnDetailsCategorical = ({ columnDetails }: ColumnDetailsCategoricalProps) => {
const { id, uniqueOptions, frequencies } = columnDetails;
- const labels = uniqueOptions && Object.values(uniqueOptions);
+ const labels = Object.values(uniqueOptions || {});
+ const localizedLabels = labels.map(option => getLocalizedValue(option));
const barData = {
- labels,
+ localizedLabels,
datasets: [
{
label: id,
diff --git a/src/UIComponents/CrossTab.tsx b/src/UIComponents/CrossTab.tsx
index e2b67082..80fa73e3 100644
--- a/src/UIComponents/CrossTab.tsx
+++ b/src/UIComponents/CrossTab.tsx
@@ -9,6 +9,7 @@ import { RootState } from "../redux";
import { getCrossTabData } from "../selectors/visualizationSelectors";
import { styles } from "../constants";
import ScrollableContent from "./ScrollableContent";
+import { getLocalizedValue } from "../helpers/valueDetails";
import I18n from "../i18n";
import { CrossTabData } from "../types";
@@ -89,7 +90,7 @@ const CrossTab = ({ crossTabData }: CrossTabProps) => {
(uniqueLabelValue, index) => {
return (
- {uniqueLabelValue}
+ {getLocalizedValue(uniqueLabelValue)}
|
);
}
@@ -102,7 +103,7 @@ const CrossTab = ({ crossTabData }: CrossTabProps) => {
(featureValue, featureIndex) => {
return (
- {featureValue}
+ {getLocalizedValue(featureValue)}
|
);
}
diff --git a/src/UIComponents/DataTable.tsx b/src/UIComponents/DataTable.tsx
index 595b77c5..4f309df2 100644
--- a/src/UIComponents/DataTable.tsx
+++ b/src/UIComponents/DataTable.tsx
@@ -4,6 +4,7 @@ import { getTableData, setCurrentColumn, setHighlightColumn, RootState } from ".
import { Dispatch } from "redux";
import { styles } from "../constants";
import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { getLocalizedValue } from "../helpers/valueDetails";
import { DataRow } from "../types";
interface DataTableProps {
@@ -160,9 +161,7 @@ const DataTable = ({
>
{startingRow !== undefined && index <= startingRow ? (
- ) : (
- row[columnId]
- )}
+ ) : getLocalizedValue(row[columnId], datasetId)}
);
})}
diff --git a/src/UIComponents/Predict.tsx b/src/UIComponents/Predict.tsx
index fec59438..ebeaecb9 100644
--- a/src/UIComponents/Predict.tsx
+++ b/src/UIComponents/Predict.tsx
@@ -17,6 +17,7 @@ import aiBotBorder from "@public/images/ai-bot/ai-bot-border.png";
import ScrollableContent from "./ScrollableContent";
import I18n from "../i18n";
import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { getLocalizedValue } from "../helpers/valueDetails";
interface PredictProps {
labelColumn: string | undefined;
@@ -94,7 +95,7 @@ const Predict = ({
.map((option, index) => {
return (
);
})}
@@ -133,7 +134,7 @@ const Predict = ({
{I18n.t("predictAIBotPredicts")}
{getLocalizedColumnName(datasetId!, labelColumn!)}
-
{getLocalizedColumnName(datasetId!, String(predictedLabel))}
+
{getLocalizedValue(predictedLabel)}
)}
diff --git a/src/UIComponents/ResultsTable.tsx b/src/UIComponents/ResultsTable.tsx
index 932c4d2c..ac8666e6 100644
--- a/src/UIComponents/ResultsTable.tsx
+++ b/src/UIComponents/ResultsTable.tsx
@@ -6,6 +6,7 @@ import { Dispatch } from "redux";
import { styles, colors, REGRESSION_ERROR_TOLERANCE } from "../constants";
import I18n from "../i18n";
import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { getLocalizedValue } from "../helpers/valueDetails";
import { ResultsData } from "../types";
interface ResultsTableProps {
@@ -116,15 +117,15 @@ const ResultsTable = ({ selectedFeatures, labelColumn, results, isRegression: is
{examples.map((example, i) => {
return (
- {example}
+ {getLocalizedValue(example)}
|
);
})}
- {results.labels[index]}
+ {getLocalizedValue(results.labels[index])}
|
- {results.predictedLabels[index]}
+ {getLocalizedValue(results.predictedLabels[index])}
|
);
diff --git a/src/helpers/valueDetails.ts b/src/helpers/valueDetails.ts
new file mode 100644
index 00000000..ad65a86c
--- /dev/null
+++ b/src/helpers/valueDetails.ts
@@ -0,0 +1,16 @@
+import I18n from "../i18n";
+
+export function getLocalizedValue(value: string | number, datasetId: string): string | number {
+ if (typeof value === 'number') {
+ return value;
+ }
+
+ if (Number.isFinite(+(value || NaN))) {
+ return value;
+ }
+
+ return I18n.t(value, {
+ scope: ['datasets', datasetId, 'values'],
+ default: value,
+ });
+}