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, + }); +}