Merge pull request #107 from NGO-Algorithm-Audit/feature/changes-15-jun-sdg

Column headers in table are translatable when needed

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -262,7 +262,9 @@ def run():
                 'titleKey': 'syntheticData.handlingMissingDataTableTitle',
                 'showIndex' : False,    
                 'data': missingness_dict_df.to_json(orient="records"),
-                'noTableBelowTable': True                                            
+                'noTableBelowTable': True,
+                'translateColumnHeaders': True,
+                'translatePrefix': 'missingData.'                                            
             },
             {
                 'reportType': 'text',
@@ -333,7 +335,8 @@ def run():
                     'contentType': 'text',
                     'text': f"Score: {dp_score:.3f}"
                 }],
-                'data': dp_report_df.to_json(orient="records"),                
+                'data': dp_report_df.to_json(orient="records"),
+                'translateColumnHeaders': True                
             }                       
         ]
     }))

src/components/DistributionReport.tsx

@@ -75,6 +75,8 @@ interface DistributionReport {
     postContent?: string;
     noTableBelowTable?: boolean;
     noHTML?: boolean;
+    translateColumnHeaders?: boolean;
+    translatePrefix?: string;
 }
 export interface DistributionReportProps {
     dataTypes: string;
@@ -185,6 +187,12 @@ export const DistributionReport = (
                                                 noTableBelowTable={
                                                     report.noTableBelowTable
                                                 }
+                                                translateColumnHeaders={
+                                                    report.translateColumnHeaders
+                                                }
+                                                translatePrefix={
+                                                    report.translatePrefix
+                                                }
                                             />
                                             {report.postContent &&
                                                 postContent.map(

src/components/SimpleTable.tsx

@@ -15,12 +15,16 @@ export default function SimpleTable({
     showIndex,
     translate,
     noTableBelowTable,
+    translateColumnHeaders,
+    translatePrefix,
 }: {
     showIndex: boolean;
     title?: string;
     data: Record<string, string | number>[];
     translate?: boolean;
     noTableBelowTable?: boolean;
+    translateColumnHeaders?: boolean;
+    translatePrefix?: string;
 }) {
     const { t } = useTranslation();
     // limit data to the first 100 rows.
@@ -37,7 +41,9 @@ export default function SimpleTable({
                         {showIndex && <TableHead></TableHead>}
                         {Object.keys(data[0]).map(key => (
                             <TableHead key={key} className="text-black">
-                                {translate ? t(key) : key}
+                                {translate || translateColumnHeaders
+                                    ? t(`${translatePrefix ?? ''}${key}`)
+                                    : key}
                             </TableHead>
                         ))}
                     </TableRow>

src/locales/en.ts

@@ -22,7 +22,14 @@ export const en = {
     installingPackages: 'Installing additional packages...',
     runningAnalysis: 'Running analysis...',
     categorical: 'Categorical',
-    numerical: 'Numerical',
+    numerical: 'numerical',
+    threshold: 'threshold',
+    risk_rate: 'risk_rate',
+    disclosure_protection_score: 'disclosure_protection_score',
+    missingData: {
+        Column: 'Column',
+        'Missing data type': 'Missing data type',
+    },
     biasSettings: {
         dataType: {
             numeric: 'Numeric',

src/locales/nl.ts

@@ -20,6 +20,13 @@ export const nl = {
     runningAnalysis: 'Analyse uitvoeren...',
     categorical: 'Categorisch',
     numerical: 'Numeriek',
+    threshold: 'drempelwaarde',
+    risk_rate: 'risk_rate',
+    disclosure_protection_score: 'disclosure_protection_score',
+    missingData: {
+        Column: 'Kolom',
+        'Missing data type': 'Type missende data',
+    },
     biasSettings: {
         dataType: {
             numeric: 'Numeriek',