Skip to content

Commit 3ffe3dc

Browse files
devhelprdevhelpr
committed
pre and postcontent before and after table.. move diagnostic results between univariate and bivariate
1 parent 8cc106b commit 3ffe3dc

File tree

2 files changed

+108
-37
lines changed

2 files changed

+108
-37
lines changed

‎src/assets/synthetic-data.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -261,34 +261,26 @@ def run():
261261
'headingKey': 'syntheticData.evaluationOfGeneratedDataTitle'
262262
},
263263
{'reportType': 'univariateDistributionSyntheticData'},
264-
{'reportType': 'bivariateDistributionSyntheticData'},
265-
{'reportType': 'correlationSyntheticData'},
266264
{
267265
'reportType': 'table',
268266
'titleKey': 'syntheticData.diagnosticsTitle',
269-
'showIndex' : False,
267+
'showIndex' : False,
270268
'data': json.dumps([
271269
{
272270
'attribute': key,
273271
'ks_stat': values['ks_stat'],
274272
'p_value': values['p_value']
275273
}
276274
for key, values in results['distribution_results'].items()
277-
])
278-
}
275+
]),
276+
'postContent': json.dumps([{
277+
'contentType' : 'correlationSyntheticData'
278+
}])
279+
},
280+
{'reportType': 'bivariateDistributionSyntheticData'}
279281
]
280282
}))
281283
282-
setResult(json.dumps(
283-
{
284-
'type': 'heading',
285-
'headingKey': 'syntheticData.correlationDifference',
286-
'params': {
287-
'correlationDifference' : str(results['correlation_diff'])
288-
}
289-
}
290-
))
291-
292284
setResult(json.dumps({
293285
'type': 'heading',
294286
'headingKey': 'syntheticData.outputDataTitle'

‎src/components/DistributionReport.tsx‎

Lines changed: 101 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,30 @@ import ViolinChart from './graphs/ViolinChart';
1111
import GroupBarChart from './graphs/GroupBarChart';
1212
import SimpleTable from './SimpleTable';
1313

14+
interface CorrelationMatrixProps {
15+
heatmapData: {
16+
columns: string[];
17+
data: number[][];
18+
};
19+
}
20+
21+
function CorrelationMatrix(props: CorrelationMatrixProps) {
22+
return (
23+
<div className="grid lg:grid-cols-[50%_50%] grid-cols-[100%]">
24+
<div className="col-[1]">
25+
<HeatMapChart
26+
columns={props.heatmapData.columns}
27+
data={props.heatmapData.data}
28+
title={t('heatmap.syntheticdata')}
29+
rangeMax={2}
30+
rangeMin={0}
31+
colors="LtRd"
32+
/>
33+
</div>
34+
</div>
35+
);
36+
}
37+
1438
function countCategory2ForCategory1(
1539
data: Record<string, any>[],
1640
category1: string,
@@ -29,6 +53,12 @@ function countCategory2ForCategory1(
2953
return (count / total) * 100;
3054
}
3155

56+
type additionalContent = {
57+
contentType: string;
58+
textKey?: string;
59+
params?: Record<string, string | number | boolean>;
60+
}[];
61+
3262
interface DistributionReport {
3363
reportType: string;
3464
headingKey?: string;
@@ -37,6 +67,8 @@ interface DistributionReport {
3767
data?: string;
3868
titleKey?: string;
3969
showIndex?: boolean;
70+
preContent?: string;
71+
postContent?: string;
4072
}
4173
export interface DistributionReportProps {
4274
dataTypes: string;
@@ -90,6 +122,13 @@ export const DistributionReport = (
90122
if (!report.titleKey) {
91123
return null;
92124
}
125+
const preContent: additionalContent = report.preContent
126+
? JSON.parse(report.preContent)
127+
: [];
128+
const postContent: additionalContent =
129+
report.postContent
130+
? JSON.parse(report.postContent)
131+
: [];
93132

94133
return (
95134
<div key={indexReport} className="mb-4">
@@ -98,13 +137,68 @@ export const DistributionReport = (
98137
content={
99138
<div>
100139
<p>&nbsp;</p>
140+
{preContent.map(
141+
(content, index) => {
142+
if (
143+
content.contentType ===
144+
'text'
145+
) {
146+
return (
147+
<Markdown
148+
key={index}
149+
className="-mt-2 text-gray-800 markdown"
150+
>
151+
{t(
152+
content.textKey ??
153+
'',
154+
content.params
155+
)}
156+
</Markdown>
157+
);
158+
}
159+
}
160+
)}
101161
<SimpleTable
102162
data={JSON.parse(report.data)}
103163
title={t(report.titleKey)}
104164
showIndex={
105165
report.showIndex ?? false
106166
}
107167
/>
168+
{report.postContent &&
169+
postContent.map(
170+
(content, index) => {
171+
if (
172+
content.contentType ===
173+
'text'
174+
) {
175+
return (
176+
<Markdown
177+
key={index}
178+
className="-mt-2 text-gray-800 markdown"
179+
>
180+
{t(
181+
content.textKey ??
182+
'',
183+
content.params
184+
)}
185+
</Markdown>
186+
);
187+
} else if (
188+
content.contentType ===
189+
'correlationSyntheticData'
190+
) {
191+
return (
192+
<CorrelationMatrix
193+
key={index}
194+
heatmapData={createHeatmapdata(
195+
distributionReportProps.syntheticCorrelations
196+
)}
197+
/>
198+
);
199+
}
200+
}
201+
)}
108202
</div>
109203
}
110204
/>
@@ -326,9 +420,9 @@ export const DistributionReport = (
326420
</h2>
327421
<div className="flex flex-row w-full overflow-auto gap-4">
328422
{categories.map(
329-
item => (
423+
(item, index) => (
330424
<div
331-
key={item}
425+
key={`${item}${index}`}
332426
className="flex flex-col"
333427
>
334428
<GroupBarChart
@@ -531,33 +625,18 @@ export const DistributionReport = (
531625
}
532626

533627
if (report.reportType === 'correlationSyntheticData') {
534-
const {
535-
columns: synthticColumns,
536-
data: syntheticData,
537-
} = createHeatmapdata(
538-
distributionReportProps.syntheticCorrelations
539-
);
540628
return (
541629
<div className="mb-4" key={indexReport}>
542630
<Accordion
543631
title={t(
544632
'syntheticData.correlationSyntheticData'
545633
)}
546634
content={
547-
<div className="grid lg:grid-cols-[50%_50%] grid-cols-[100%]">
548-
<div className="col-[1]">
549-
<HeatMapChart
550-
columns={synthticColumns}
551-
data={syntheticData}
552-
title={t(
553-
'heatmap.syntheticdata'
554-
)}
555-
rangeMax={2}
556-
rangeMin={0}
557-
colors="LtRd"
558-
/>
559-
</div>
560-
</div>
635+
<CorrelationMatrix
636+
heatmapData={createHeatmapdata(
637+
distributionReportProps.syntheticCorrelations
638+
)}
639+
/>
561640
}
562641
></Accordion>
563642
</div>

0 commit comments

Comments
 (0)