Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix labels on pdf export #89

Merged
merged 1 commit into from
Sep 26, 2024
Merged

fix labels on pdf export #89

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 76 additions & 70 deletions met-web/src/components/publicDashboard/SurveyBarPrintable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { SurveyResultData, createSurveyResultData } from '../../../models/analyt
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, LabelList } from 'recharts';
import { DASHBOARD } from '../constants';

const HEIGHT = 400;
const minHeight = 400;
const maxHeight = 1300;

interface SurveyQuestionProps {
engagement: Engagement;
Expand All @@ -21,12 +22,6 @@ export const SurveyBarPrintable = ({ engagement, engagementIsLoading, dashboardT
const [isLoading, setIsLoading] = useState(true);
const [isError, setIsError] = useState(false);

const minHeight = 400;
const maxHeight = 1300;

const numberOfCategories = data?.data[0]?.result?.length ?? 0;
const height = Math.min(Math.max(numberOfCategories * 40, minHeight), maxHeight);

const fetchData = async () => {
setIsLoading(true);
try {
Expand All @@ -52,7 +47,7 @@ export const SurveyBarPrintable = ({ engagement, engagementIsLoading, dashboardT
}, [engagement.id]);

if (isLoading || engagementIsLoading) {
return <Skeleton variant="rectangular" width={'100%'} height={HEIGHT} />;
return <Skeleton variant="rectangular" width={'100%'} height={minHeight} />;
}

if (isError) {
Expand All @@ -73,72 +68,83 @@ export const SurveyBarPrintable = ({ engagement, engagementIsLoading, dashboardT
<MetHeader1>Survey Results</MetHeader1>
</Grid>
{Object.values(data).map((value) => {
{
return value.map((result: SurveyBarData, i: number) => {
return (
<div id={'question' + i} key={i}>
<Grid key={result.position} mb={2} item xs={12}>
<MetPaper sx={{ p: 2 }}>
<Grid item xs={12}>
<MetLabel mb={2} color="primary">
{result.label}
</MetLabel>
<Divider sx={{ marginTop: '1em' }} />
<Box marginLeft={{ xs: 0, sm: '2em' }} marginTop={'3em'}>
<ResponsiveContainer
width={'100%'}
height={height}
return value.map((result: SurveyBarData, i: number) => {
const numberOfCategories = result.result.length;
const labelMargin = 20; // Margin between label and axis
// Calculate the maximum length of values in the category
const maxLabelLength = result.result.reduce((max, category) => {
const labelLength = category.value.length;
return labelLength > max ? labelLength : max;
}, 0);
// Divide the text into lines of 35 characters
const linesPerLabel = Math.ceil(maxLabelLength / 35) * 5; // 5 is a Buffer
// Calculate the height based on the number of categories and the space required for labels
const height = Math.min(
Math.max(numberOfCategories * (linesPerLabel + labelMargin), minHeight),
maxHeight,
);
return (
<div id={'question' + i} key={i}>
<Grid key={result.position} mb={2} item xs={12}>
<MetPaper sx={{ p: 2 }}>
<Grid item xs={12}>
<MetLabel mb={2} color="primary">
{result.label}
</MetLabel>
<Divider sx={{ marginTop: '1em' }} />
<Box marginLeft={{ xs: 0, sm: '2em' }} marginTop={'3em'}>
<ResponsiveContainer width={'100%'} height={height} key={result.position}>
<BarChart
data={result.result}
layout={'vertical'}
key={result.position}
margin={{ left: 0 }}
>
<BarChart
data={result.result}
layout={'vertical'}
key={result.position}
margin={{ left: 0 }}
<XAxis
dataKey={undefined}
type={'number'}
axisLine={true}
tickLine={true}
minTickGap={10}
tickMargin={10}
hide={true}
/>
<YAxis
width={250}
dataKey={'value'}
type={'category'}
axisLine={true}
tickLine={true}
minTickGap={10}
tickMargin={10}
hide={false}
tickFormatter={(value: string) =>
value.length > 25 ? value.slice(0, 25) + '...' : value
}
/>
<Tooltip />
<Bar
dataKey="count"
stackId="a"
fill={DASHBOARD.BAR_CHART.FILL_COLOR}
minPointSize={2}
barSize={32}
>
<XAxis
dataKey={undefined}
type={'number'}
axisLine={true}
tickLine={true}
minTickGap={10}
tickMargin={10}
hide={true}
/>
<YAxis
width={250}
dataKey={'value'}
type={'category'}
axisLine={true}
tickLine={true}
minTickGap={10}
tickMargin={10}
hide={false}
/>
<Tooltip />
<Bar
<LabelList
dataKey="count"
stackId="a"
fill={DASHBOARD.BAR_CHART.FILL_COLOR}
minPointSize={2}
barSize={32}
>
<LabelList
dataKey="count"
position={'insideRight'}
style={{ fill: 'white' }}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</Box>
</Grid>
</MetPaper>
</Grid>
</div>
);
});
}
position={'insideRight'}
style={{ fill: 'white' }}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</Box>
</Grid>
</MetPaper>
</Grid>
</div>
);
});
})}
</>
);
Expand Down
Loading