Skip to content

Commit

Permalink
fix labels on pdf export (#89)
Browse files Browse the repository at this point in the history
  • Loading branch information
@VineetBala-AOT
VineetBala-AOT authored Sep 26, 2024
1 parent 3d0205e commit 47101e5
Showing 1 changed file with 76 additions and 70 deletions.
146 changes: 76 additions & 70 deletions met-web/src/components/publicDashboard/SurveyBarPrintable/index.tsx
View file
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

0 comments on commit 47101e5

Please sign in to comment.