diff --git a/met-web/src/components/publicDashboard/SurveyBarPrintable/index.tsx b/met-web/src/components/publicDashboard/SurveyBarPrintable/index.tsx
index 60d675a64..893a85427 100644
--- a/met-web/src/components/publicDashboard/SurveyBarPrintable/index.tsx
+++ b/met-web/src/components/publicDashboard/SurveyBarPrintable/index.tsx
@@ -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;
@@ -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 {
@@ -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) {
@@ -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>
+ );
+ });
})}
</>
);