ui text 3 and 4

Author: devhelpr

src/components/DistributionReport.tsx

@@ -391,7 +391,20 @@ export const DistributionReport = (
                                     title={t(
                                         'syntheticData.bivariateDistributionSyntheticData'
                                     )}
-                                    content={<div>{charts}</div>}
+                                    content={
+                                        <div>
+                                            <Markdown className="py-4 markdown">
+                                                {t(
+                                                    'syntheticData.bivariateText',
+                                                    {
+                                                        samples:
+                                                            syntheticData.length,
+                                                    }
+                                                )}
+                                            </Markdown>
+                                            {charts}
+                                        </div>
+                                    }
                                 />
                             </div>
                         );
@@ -440,55 +453,76 @@ export const DistributionReport = (
                                             title={t(
                                                 'syntheticData.univariateDistributionSyntheticData'
                                             )}
-                                            content={Object.keys(
-                                                realData[0]
-                                            ).map(
-                                                (
-                                                    columnName: string,
-                                                    columnIndex: number
-                                                ) => {
-                                                    const realDataColumn =
-                                                        realData.map(
-                                                            (
-                                                                row: Record<
-                                                                    string,
-                                                                    number
-                                                                >
-                                                            ) => row[columnName]
-                                                        );
-                                                    const syntheticDataColumn =
-                                                        syntheticData.map(
-                                                            (
-                                                                row: Record<
-                                                                    string,
-                                                                    number
+                                            content={
+                                                <>
+                                                    <Markdown className="py-4 markdown">
+                                                        {t(
+                                                            'syntheticData.univariateText',
+                                                            {
+                                                                samples:
+                                                                    syntheticData.length,
+                                                            }
+                                                        )}
+                                                    </Markdown>
+                                                    {Object.keys(
+                                                        realData[0]
+                                                    ).map(
+                                                        (
+                                                            columnName: string,
+                                                            columnIndex: number
+                                                        ) => {
+                                                            const realDataColumn =
+                                                                realData.map(
+                                                                    (
+                                                                        row: Record<
+                                                                            string,
+                                                                            number
+                                                                        >
+                                                                    ) =>
+                                                                        row[
+                                                                            columnName
+                                                                        ]
+                                                                );
+                                                            const syntheticDataColumn =
+                                                                syntheticData.map(
+                                                                    (
+                                                                        row: Record<
+                                                                            string,
+                                                                            number
+                                                                        >
+                                                                    ) =>
+                                                                        row[
+                                                                            columnName
+                                                                        ]
+                                                                );
+                                                            return (
+                                                                <ErrorBoundary
+                                                                    key={
+                                                                        columnIndex
+                                                                    }
                                                                 >
-                                                            ) => row[columnName]
-                                                        );
-                                                    return (
-                                                        <ErrorBoundary
-                                                            key={columnIndex}
-                                                        >
-                                                            <DistributionBarChart
-                                                                dataType={
-                                                                    dataTypes[
-                                                                        columnName
-                                                                    ]
-                                                                }
-                                                                realData={
-                                                                    realDataColumn
-                                                                }
-                                                                syntheticData={
-                                                                    syntheticDataColumn
-                                                                }
-                                                                column={
-                                                                    columnName
-                                                                }
-                                                            />
-                                                        </ErrorBoundary>
-                                                    );
-                                                }
-                                            )}
+                                                                    <DistributionBarChart
+                                                                        dataType={
+                                                                            dataTypes[
+                                                                                columnName
+                                                                            ]
+                                                                        }
+                                                                        realData={
+                                                                            realDataColumn
+                                                                        }
+                                                                        syntheticData={
+                                                                            syntheticDataColumn
+                                                                        }
+                                                                        column={
+                                                                            columnName
+                                                                        }
+                                                                    />
+                                                                </ErrorBoundary>
+                                                            );
+                                                        }
+                                                    )}
+                                                </>
+                                            }
                                         ></Accordion>
                                     </div>
                                 )}

src/locales/en.json

@@ -107,7 +107,9 @@
         "evaluationOfGeneratedDataTitle": "3. Evaluation of generated data",
         "outputDataTitle": "4. Generated synthetic data",
         "diagnosticsTitle": "Diagnostic Results",
-        "correlationDifference": "Correlation difference: {{correlationDifference}}"
+        "correlationDifference": "Correlation difference: {{correlationDifference}}",
+        "univariateText": "{{samples}} synthetic data points are generated using CART. The figures below display the differences in value frequency for each variable. The synthetic data is of high quality when all bars are of equal height.",
+        "bivariateText": "The figures below display the differences in value frequency for a combination of variables. For comparing two categorical variables, bar charts are plotted. For comparing a numerical and a categorical variables, a so called [violin plot](https://en.wikipedia.org/wiki/Violin_plot) is shown. For comparing two numercial variables, a [LOESS plot](https://en.wikipedia.org/wiki/Local_regression) is created. For all plots holds: the synthetic data is of high quality when the shape of the distributions in the synthetic data equal the distributions in the real data."
     },
 
     "biasAnalysis": {

src/locales/nl.json

@@ -84,7 +84,8 @@
                 "runGeneration": "Start synthetische data generatie",
                 "analyzing": "Analyseren...",
                 "initializing": "Initialiseren..."
-            }
+            },
+            "univariateText": "{{samples}} synthetic data punten zijn gegeneert met CART. De grafieken tonen de verschillen in waarde frequentie voor elle variabele. De synthetische data is van hoge kwaliteit als alle balken van gelijke hoogte zijn."
         },
         "demoCard": {
             "title": "Probeer het uit!",