Skip to content

Commit 4c31d63

Browse files
devhelprdevhelpr
authored
Merge pull request #36 from NGO-Algorithm-Audit/feature/bivariate-compare-cat-cat
bivariate category vs category charts WiP
2 parents 32f04e6 + a2803fb commit 4c31d63

File tree

2 files changed

+193
-25
lines changed

2 files changed

+193
-25
lines changed

‎public/helper.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
export const Test = () => (
2+
<GroupBarChart
3+
yAxisLabel={'count'}
4+
data={[
5+
{
6+
name: 'test1',
7+
values: [
8+
{
9+
name: 'testa',
10+
value: 2,
11+
},
12+
{
13+
name: 'testb',
14+
value: 3,
15+
},
16+
],
17+
},
18+
{
19+
name: 'test2',
20+
values: [
21+
{
22+
name: 'testa',
23+
value: 2,
24+
},
25+
{
26+
name: 'testb',
27+
value: 3,
28+
},
29+
],
30+
},
31+
{
32+
name: 'test3',
33+
values: [
34+
{
35+
name: 'testa',
36+
value: 4,
37+
},
38+
{
39+
name: 'testb',
40+
value: 2,
41+
},
42+
],
43+
},
44+
]}
45+
title={`testa vs testb`}
46+
/>
47+
);

‎src/components/DistributionReport.tsx‎

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

14+
function countCategory2ForCategory1(
15+
data: Record<string, any>[],
16+
category1: string,
17+
category2: string,
18+
column1: string,
19+
column2: string
20+
) {
21+
const count = data.filter(
22+
row => row[column1] === category1 && row[column2] === category2
23+
).length;
24+
return count;
25+
}
26+
1427
interface DistributionReport {
1528
reportType: string;
1629
headingKey?: string;
@@ -234,31 +247,139 @@ export const DistributionReport = (
234247
report.reportType ===
235248
'bivariateDistributionSyntheticData'
236249
) {
237-
const charts = columnNames.map(column => {
238-
const dataType = dataTypes[column];
239-
return columnNames.map(column2 => {
240-
if (column === column2) {
241-
return null;
242-
}
243-
const dataType2 = dataTypes[column2];
244-
if (
245-
dataType === 'float' &&
246-
dataType2 === 'category'
247-
) {
248-
return (
249-
<ViolinChart
250-
key={column + column2}
251-
categoricalColumn={column2}
252-
numericColumn={column}
253-
realData={realData}
254-
syntheticData={syntheticData}
255-
comparison={true}
256-
/>
257-
);
258-
}
259-
return null;
260-
});
261-
});
250+
console.log(
251+
'bivariateDistributionSyntheticData',
252+
columnNames
253+
);
254+
const charts = columnNames.map(
255+
(column, indexcolumn1) => {
256+
const dataType = dataTypes[column];
257+
return columnNames.map(
258+
(column2, indexcolumn2) => {
259+
const dataType2 = dataTypes[column2];
260+
if (
261+
//column === column2 ||
262+
indexcolumn1 >= indexcolumn2
263+
) {
264+
if (indexcolumn1 != indexcolumn2) {
265+
console.log(
266+
'skipped columns',
267+
column,
268+
column2,
269+
indexcolumn1,
270+
indexcolumn2,
271+
indexcolumn1 >=
272+
indexcolumn2,
273+
dataType,
274+
dataType2
275+
);
276+
}
277+
278+
return null;
279+
}
280+
281+
if (
282+
dataType === 'category' &&
283+
dataType2 === 'float'
284+
) {
285+
return (
286+
<ViolinChart
287+
key={column + column2}
288+
categoricalColumn={column}
289+
numericColumn={column2}
290+
realData={realData}
291+
syntheticData={
292+
syntheticData
293+
}
294+
comparison={true}
295+
/>
296+
);
297+
} else if (
298+
dataType === 'float' &&
299+
dataType2 === 'category'
300+
) {
301+
return (
302+
<ViolinChart
303+
key={column + column2}
304+
categoricalColumn={column2}
305+
numericColumn={column}
306+
realData={realData}
307+
syntheticData={
308+
syntheticData
309+
}
310+
comparison={true}
311+
/>
312+
);
313+
} else if (
314+
dataType === 'category' &&
315+
dataType2 === 'category'
316+
) {
317+
const categories = Array.from(
318+
new Set([
319+
...realData.map(
320+
(d: any) => d[column]
321+
),
322+
])
323+
);
324+
const categories2 = Array.from(
325+
new Set([
326+
...realData.map(
327+
(d: any) => d[column2]
328+
),
329+
])
330+
);
331+
332+
return (
333+
<div className="flex flex-row w-full overflow-auto gap-4">
334+
{categories.map(item => (
335+
<div
336+
key={item}
337+
className="flex flex-col"
338+
>
339+
<GroupBarChart
340+
yAxisLabel={
341+
'count'
342+
}
343+
title={`${column} = ${item}`}
344+
data={categories2.map(
345+
item2 => ({
346+
// count : number of times where item2 appears in the data for category2 and rows where category1 = item
347+
name: `${item2}`,
348+
values: [
349+
{
350+
name: 'real',
351+
value: countCategory2ForCategory1(
352+
realData,
353+
item,
354+
item2,
355+
column,
356+
column2
357+
),
358+
},
359+
{
360+
name: 'synth',
361+
value: countCategory2ForCategory1(
362+
syntheticData,
363+
item,
364+
item2,
365+
column,
366+
column2
367+
),
368+
},
369+
],
370+
})
371+
)}
372+
/>
373+
</div>
374+
))}
375+
</div>
376+
);
377+
}
378+
return null;
379+
}
380+
);
381+
}
382+
);
262383
return (
263384
<div key={indexReport} className="mb-4">
264385
<Accordion

0 commit comments

Comments
 (0)