Localize data rows

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,

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 (
                         <td key={index} style={styles.tableCell}>
-                          {uniqueLabelValue}
+                          {getLocalizedValue(uniqueLabelValue)}
                         </td>
                       );
                     }
@@ -102,7 +103,7 @@ const CrossTab = ({ crossTabData }: CrossTabProps) => {
                         (featureValue, featureIndex) => {
                           return (
                             <td key={featureIndex} style={styles.tableCell}>
-                              {featureValue}
+                              {getLocalizedValue(featureValue)}
                             </td>
                           );
                         }

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 ? (
                       <span>&nbsp;</span>
-                    ) : (
-                      row[columnId]
-                    )}
+                    ) : getLocalizedValue(row[columnId], datasetId)}
                   </td>
                 );
               })}

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 (
                           <option key={index} value={option}>
-                            {option}
+                            {getLocalizedValue(option)}
                           </option>
                         );
                       })}
@@ -133,7 +134,7 @@ const Predict = ({
           <div style={styles.predictBotRight}>
             <div style={styles.statement}>{I18n.t("predictAIBotPredicts")}</div>
             <div>{getLocalizedColumnName(datasetId!, labelColumn!)}</div>
-            <div>{getLocalizedColumnName(datasetId!, String(predictedLabel))}</div>
+            <div>{getLocalizedValue(predictedLabel)}</div>
           </div>
         </div>
       )}

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 (
                       <td style={getRowCellStyle(index)} key={i}>
-                        {example}
+                        {getLocalizedValue(example)}
                       </td>
                     );
                   })}
                   <td style={getRowCellStyle(index)}>
-                    {results.labels[index]}
+                    {getLocalizedValue(results.labels[index])}
                   </td>
                   <td style={getRowCellStyle(index)}>
-                    {results.predictedLabels[index]}
+                    {getLocalizedValue(results.predictedLabels[index])}
                   </td>
                 </tr>
               );

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