From 47101e598845f7c1421608b4743cd682bf1c34a2 Mon Sep 17 00:00:00 2001
From: VineetBala-AOT <90332175+VineetBala-AOT@users.noreply.github.com>
Date: Thu, 26 Sep 2024 14:15:14 -0700
Subject: [PATCH] fix labels on pdf export (#89)

---
 .../SurveyBarPrintable/index.tsx              | 146 +++++++++---------
 1 file changed, 76 insertions(+), 70 deletions(-)

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>
+                    );
+                });
             })}
         </>
     );