Skip to content

Commit 26caa89

Browse files
devhelprdevhelpr
authored
Merge pull request #25 from NGO-Algorithm-Audit/feature/report-additionsl-accordeons
placeholders and heatmap (also absolute)
2 parents e897097 + 7dc317a commit 26caa89

File tree

7 files changed

+339
-351
lines changed

7 files changed

+339
-351
lines changed

‎src/assets/synthetic-data.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,10 @@ def run():
220220
combined_data = pd.concat((real_data.assign(realOrSynthetic='real'), synth_df.assign(realOrSynthetic='synthetic')), keys=['real','synthetic'], names=['Data'])
221221
# combined_data_encoded = pd.concat((df_encoded.assign(realOrSynthetic='real_encoded'), synth_df.assign(realOrSynthetic='synthetic')), keys=['real_encoded','synthetic'], names=['Data'])
222222
223+
df_numeric = real_data.apply(pd.to_numeric, errors='coerce')
224+
synth_df_numeric = synthetic_data.apply(pd.to_numeric, errors='coerce')
225+
226+
223227
# setResult(json.dumps({'type': 'distribution', 'real': real_data.to_json(orient="records"), 'synthetic': synthetic_data.to_json(orient="records"), 'dataTypes': json.dumps(dtypes_dict), 'combined_data' : combined_data.to_json(orient="records")}))
224228
setResult(json.dumps({
225229
'type': 'distribution',
@@ -228,13 +232,15 @@ def run():
228232
'dataTypes': json.dumps(dtypes_dict),
229233
'combined_data' : combined_data.to_json(orient="records"),
230234
'realCorrelations': real_data.corr().to_json(orient="records"),
231-
'syntheticCorrelations': synthetic_data.corr().to_json(orient="records"),
235+
'syntheticCorrelations': np.abs(df_numeric.corr() - synth_df_numeric.corr()).to_json(orient="records"),
232236
'reports' : [
233237
{
234238
'reportType': 'heading',
235239
'headingKey': 'syntheticData.explanatoryDataAnalysisTitle'
236240
},
237-
{'reportType': 'univariate'},
241+
{'reportType': 'univariateDistributionRealData'},
242+
{'reportType': 'bivariateDistributionRealData'},
243+
{'reportType': 'correlationRealData'},
238244
{
239245
'reportType': 'heading',
240246
'headingKey': 'syntheticData.cartModelTitle'
@@ -247,8 +253,9 @@ def run():
247253
'reportType': 'heading',
248254
'headingKey': 'syntheticData.evaluationOfGeneratedDataTitle'
249255
},
250-
{'reportType': 'distribution'},
251-
{'reportType': 'correlation'},
256+
{'reportType': 'univariateDistributionSyntheticData'},
257+
{'reportType': 'bivariateDistributionSyntheticData'},
258+
{'reportType': 'correlationSyntheticData'},
252259
253260
]
254261
}))

‎src/components/DistributionReport.tsx‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
import { t } from 'i18next';
2+
import Markdown from 'react-markdown';
3+
import { Fragment } from 'react/jsx-runtime';
4+
import ErrorBoundary from './ErrorBoundary';
5+
import DistributionBarChart from './graphs/DistributionBarChart';
6+
import HeatMapChart from './graphs/HeatMap';
7+
import { UnivariateCharts } from './UnivariateCharts';
8+
import { Accordion } from './ui/accordion';
9+
import { createHeatmapdata } from './createHeatmapdata';
10+
11+
interface DistributionReport {
12+
reportType: string;
13+
headingKey?: string;
14+
textKey?: string;
15+
params?: Record<string, string | number | boolean>;
16+
}
17+
export interface DistributionReportProps {
18+
dataTypes: string;
19+
real: string;
20+
synthetic: string;
21+
reports: DistributionReport[];
22+
realCorrelations: string;
23+
syntheticCorrelations: string;
24+
combined_data: string;
25+
}
26+
export const DistributionReport = (
27+
distributionReportProps: DistributionReportProps
28+
) => {
29+
const realData = JSON.parse(distributionReportProps.real);
30+
const syntheticData = JSON.parse(distributionReportProps.synthetic);
31+
const dataTypes = JSON.parse(distributionReportProps.dataTypes);
32+
console.log('reports', distributionReportProps.reports);
33+
return (
34+
<div className="flex flex-col gap-6">
35+
{distributionReportProps.reports.map(
36+
(report: DistributionReport, indexReport: number) => {
37+
if (report.reportType === 'heading' && report.headingKey) {
38+
return (
39+
<h5
40+
key={indexReport}
41+
className="text-gray-800 font-semibold mb-4"
42+
>
43+
{t(report.headingKey, report.params)}
44+
</h5>
45+
);
46+
}
47+
if (report.reportType === 'text' && report.textKey) {
48+
return (
49+
<Markdown
50+
key={indexReport}
51+
className="-mt-2 text-gray-800 markdown"
52+
>
53+
{t(report.textKey, report.params)}
54+
</Markdown>
55+
);
56+
}
57+
if (
58+
report.reportType === 'univariateDistributionRealData'
59+
) {
60+
return (
61+
<div key={indexReport} className="mb-4">
62+
<Accordion
63+
title={t('syntheticData.univariateCharts')}
64+
content={
65+
<UnivariateCharts
66+
realData={realData}
67+
syntheticData={syntheticData}
68+
dataTypes={dataTypes}
69+
combined_data={JSON.parse(
70+
distributionReportProps.combined_data
71+
)}
72+
comparison={false}
73+
/>
74+
}
75+
/>
76+
</div>
77+
);
78+
}
79+
if (report.reportType === 'bivariateDistributionRealData') {
80+
return (
81+
<div key={indexReport} className="mb-4">
82+
<Accordion
83+
title={t(
84+
'syntheticData.bivariateDistributionRealData'
85+
)}
86+
content={<p>PLACEHOLDER</p>}
87+
/>
88+
</div>
89+
);
90+
}
91+
if (
92+
report.reportType ===
93+
'bivariateDistributionSyntheticData'
94+
) {
95+
return (
96+
<div key={indexReport} className="mb-4">
97+
<Accordion
98+
title={t(
99+
'syntheticData.bivariateDistributionSyntheticData'
100+
)}
101+
content={<p>PLACEHOLDER</p>}
102+
/>
103+
</div>
104+
);
105+
}
106+
if (report.reportType === 'correlationRealData') {
107+
const { columns: realColumns, data: convertedData } =
108+
createHeatmapdata(
109+
distributionReportProps.realCorrelations
110+
);
111+
return (
112+
<div key={indexReport} className="mb-4">
113+
<Accordion
114+
title={t(
115+
'syntheticData.correlationRealdata'
116+
)}
117+
content={
118+
<div className="grid lg:grid-cols-[50%_50%] grid-cols-[100%]">
119+
<div className="col-[1]">
120+
<HeatMapChart
121+
columns={realColumns}
122+
data={convertedData}
123+
title={t(
124+
'heatmap.realdata'
125+
)}
126+
rangeMax={1}
127+
rangeMin={-1}
128+
colors="RdYlBu"
129+
/>
130+
</div>
131+
</div>
132+
}
133+
/>
134+
</div>
135+
);
136+
}
137+
if (
138+
report.reportType ===
139+
'univariateDistributionSyntheticData'
140+
) {
141+
return (
142+
<Fragment key={indexReport}>
143+
{realData.length === 0 ||
144+
syntheticData.length === 0 ? null : (
145+
<div className="mb-4">
146+
<Accordion
147+
title={t(
148+
'syntheticData.univariateDistributionSyntheticData'
149+
)}
150+
content={Object.keys(
151+
realData[0]
152+
).map(
153+
(
154+
columnName: string,
155+
columnIndex: number
156+
) => {
157+
const realDataColumn =
158+
realData.map(
159+
(
160+
row: Record<
161+
string,
162+
number
163+
>
164+
) => row[columnName]
165+
);
166+
const syntheticDataColumn =
167+
syntheticData.map(
168+
(
169+
row: Record<
170+
string,
171+
number
172+
>
173+
) => row[columnName]
174+
);
175+
return (
176+
<ErrorBoundary
177+
key={columnIndex}
178+
>
179+
<DistributionBarChart
180+
dataType={
181+
dataTypes[
182+
columnName
183+
]
184+
}
185+
realData={
186+
realDataColumn
187+
}
188+
syntheticData={
189+
syntheticDataColumn
190+
}
191+
column={
192+
columnName
193+
}
194+
/>
195+
</ErrorBoundary>
196+
);
197+
}
198+
)}
199+
></Accordion>
200+
</div>
201+
)}
202+
</Fragment>
203+
);
204+
}
205+
206+
if (report.reportType === 'correlationSyntheticData') {
207+
const {
208+
columns: synthticColumns,
209+
data: syntheticData,
210+
} = createHeatmapdata(
211+
distributionReportProps.syntheticCorrelations
212+
);
213+
return (
214+
<div className="mb-4" key={indexReport}>
215+
<Accordion
216+
title={t(
217+
'syntheticData.correlationSyntheticData'
218+
)}
219+
content={
220+
<div className="grid lg:grid-cols-[50%_50%] grid-cols-[100%]">
221+
<div className="col-[1]">
222+
<HeatMapChart
223+
columns={synthticColumns}
224+
data={syntheticData}
225+
title={t(
226+
'heatmap.syntheticdata'
227+
)}
228+
rangeMax={2}
229+
rangeMin={0}
230+
colors="RdGn"
231+
/>
232+
</div>
233+
</div>
234+
}
235+
></Accordion>
236+
</div>
237+
);
238+
}
239+
return null;
240+
}
241+
)}
242+
</div>
243+
);
244+
};

0 commit comments

Comments
 (0)