Skip to content

Commit 61a105b

Browse files
devhelprdevhelpr
authored
Merge pull request #88 from NGO-Algorithm-Audit/feature/show-all-charts-on-pdf
For printing: Refactor visibility of charts in ClusterCategories and …
2 parents dd58861 + 4e7be9d commit 61a105b

File tree

4 files changed

+83
-32
lines changed

4 files changed

+83
-32
lines changed

‎src/components/composed-components/ClusterCategoriesDistributionAccordeonContent.tsx‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const ClusterCategoriesDistributionAccordeonContent = ({
4242
return (
4343
<div className="flex flex-col justify-start items-start gap-4 px-1 py-4 w-100">
4444
<ErrorBoundary>
45-
<div>
45+
<div className="hideonprint">
4646
<FilterSelect
4747
filterValues={categories}
4848
defaultValue={defaultCategory}
@@ -72,11 +72,40 @@ const ClusterCategoriesDistributionAccordeonContent = ({
7272
);
7373
return (
7474
<Fragment key={index}>
75-
{categorieFilter === chart.selectFilterGroup ||
76-
(!categorieFilter &&
77-
chart.selectFilterGroup === defaultCategory) ||
78-
!chart.selectFilterGroup ? (
79-
<>
75+
<>
76+
{categorieFilter === chart.selectFilterGroup ||
77+
(!categorieFilter &&
78+
chart.selectFilterGroup ===
79+
defaultCategory) ||
80+
!chart.selectFilterGroup ? (
81+
<div className="hideonprint">
82+
<h5
83+
key={index}
84+
className="text-gray-800 font-semibold"
85+
>
86+
{chart.headingKey
87+
? t(
88+
chart.headingKey,
89+
chart.params
90+
)
91+
: '-'}
92+
</h5>
93+
<ClusterCategoriesDistributionChart
94+
showMeanLine={true}
95+
data={distributionData}
96+
yAxisLabel={t(
97+
'distribution.frequency'
98+
)}
99+
title={chart.title ?? ''}
100+
means={chart.means ?? []}
101+
categories={chart.categories ?? []}
102+
isViridis={
103+
chart.categories !== undefined
104+
}
105+
/>
106+
</div>
107+
) : null}
108+
<div className="hidden showonprint">
80109
<h5
81110
key={index}
82111
className="text-gray-800 font-semibold"
@@ -96,8 +125,8 @@ const ClusterCategoriesDistributionAccordeonContent = ({
96125
chart.categories !== undefined
97126
}
98127
/>
99-
</>
100-
) : null}
128+
</div>
129+
</>
101130
</Fragment>
102131
);
103132
})}

‎src/components/composed-components/ClusterNumericalVariableDistributionAccordeonContent.tsx‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const ClusterNumericalVariableDistributionAccordeonContent = ({
3434
return (
3535
<div className="flex flex-col justify-start items-start gap-4 px-1 py-4 w-100">
3636
<ErrorBoundary>
37-
<div>
37+
<div className="hideonprint">
3838
<FilterSelect
3939
filterValues={categories}
4040
defaultValue={defaultCategory}
@@ -63,11 +63,33 @@ const ClusterNumericalVariableDistributionAccordeonContent = ({
6363

6464
return (
6565
<ErrorBoundary key={chartIndex}>
66-
{categorieFilter === chart.selectFilterGroup ||
67-
(!categorieFilter &&
68-
chart.selectFilterGroup === defaultCategory) ||
69-
!chart.selectFilterGroup ? (
70-
<>
66+
<>
67+
{categorieFilter === chart.selectFilterGroup ||
68+
(!categorieFilter &&
69+
chart.selectFilterGroup ===
70+
defaultCategory) ||
71+
!chart.selectFilterGroup ? (
72+
<div className="hideonprint">
73+
<h5
74+
key={chartIndex}
75+
className="text-gray-800 font-semibold"
76+
>
77+
{chart.headingKey
78+
? t(
79+
chart.headingKey,
80+
chart.params
81+
)
82+
: '-'}
83+
</h5>
84+
<SingleBarChart
85+
key={chartIndex}
86+
data={barchartData}
87+
title={chart.title ?? ''}
88+
meanValue={chart.meanValue}
89+
/>
90+
</div>
91+
) : null}
92+
<div className="hidden showonprint">
7193
<h5
7294
key={chartIndex}
7395
className="text-gray-800 font-semibold"
@@ -82,8 +104,8 @@ const ClusterNumericalVariableDistributionAccordeonContent = ({
82104
title={chart.title ?? ''}
83105
meanValue={chart.meanValue}
84106
/>
85-
</>
86-
) : null}
107+
</div>
108+
</>
87109
</ErrorBoundary>
88110
);
89111
})}

‎src/locales/en.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -320,16 +320,16 @@ In this example, we analyze which group is most adversely affected by the risk p
320320
},
321321
difference: {
322322
appearance: '{{feature}} : {{value}}',
323-
deviatingMoreOften:
324-
'**{{value}}**: occur in the most deviating cluster **more** often than in the rest of the dataset.',
325-
deviatingLessOften:
326-
'**{{value}}**: occur in the most deviating cluster **less** often than in the rest of the dataset.',
323+
deviatingMoreOften: `**{{value}}**: occur in the most deviating cluster **more** often than in the rest of the dataset.
324+
`,
325+
deviatingLessOften: `**{{value}}**: occur in the most deviating cluster **less** often than in the rest of the dataset.
326+
`,
327327
},
328328
differenceCategorical: {
329-
deviatingMoreOften:
330-
'**{{feature}}: {{value}}** in the most deviating cluster occurs **more** often than in the rest of the dataset.',
331-
deviatingLessOften:
332-
'**{{feature}}: {{value}}** in the most deviating cluster occurs **less** often than in the rest of the dataset.',
329+
deviatingMoreOften: `**{{feature}}: {{value}}** in the most deviating cluster occurs **more** often than in the rest of the dataset.
330+
`,
331+
deviatingLessOften: `**{{feature}}: {{value}}** in the most deviating cluster occurs **less** often than in the rest of the dataset.
332+
`,
333333
},
334334
},
335335
nodifference: {

‎src/locales/nl.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -244,16 +244,16 @@ p_value : {{p_val}}
244244
},
245245
difference: {
246246
appearance: '{{feature}} : {{value}}',
247-
deviatingMoreOften:
248-
'**{{value}}**: Komt **vaker** voor in de meest afwijkende cluster dan in de rest van de dataset.',
249-
deviatingLessOften:
250-
'**{{value}}**: Komt **minder** voor in de meest afwijkende cluster dan in de rest van de dataset.',
247+
deviatingMoreOften: `**{{value}}**: Komt **vaker** voor in de meest afwijkende cluster dan in de rest van de dataset.
248+
`,
249+
deviatingLessOften: `**{{value}}**: Komt **minder** voor in de meest afwijkende cluster dan in de rest van de dataset.
250+
`,
251251
},
252252
differenceCategorical: {
253-
deviatingMoreOften:
254-
'**{{feature}}: {{value}}** komt in de meest afwijkende cluster **vaker** voor dan in de rest van de dataset.',
255-
deviatingLessOften:
256-
'**{{feature}}: {{value}}** komt in de meest afwijkende cluster **minder** voor dan in de rest van de dataset.',
253+
deviatingMoreOften: `**{{feature}}: {{value}}** komt in de meest afwijkende cluster **vaker** voor dan in de rest van de dataset.
254+
`,
255+
deviatingLessOften: `**{{feature}}: {{value}}** komt in de meest afwijkende cluster **minder** voor dan in de rest van de dataset.
256+
`,
257257
},
258258
},
259259
distribution: {

0 commit comments

Comments
 (0)