Fix sumbission page chart and statistics view

Author: mmoila

client/src/components/admin/SubmissionsPage/SurveySubmissionsChart.tsx

@@ -260,7 +260,9 @@ export default function Chart({ submissions, selectedQuestion }: Props) {
     return base;
   }, [selectedQuestion, surveyLanguage]);
 
-  return answerData ? (
+  if (!answerData) return null;
+
+  return (
     <Box
       sx={{
         padding: '1rem',
@@ -320,7 +322,5 @@ export default function Chart({ submissions, selectedQuestion }: Props) {
       </ResponsiveContainer>
       <LabelTooltip tooltip={tooltip} />
     </Box>
-  ) : (
-    <></>
   );
 }

client/src/components/admin/SubmissionsPage/SurveySubmissionsPage.tsx

@@ -33,6 +33,13 @@ import { DataChart } from './DataChart';
 import Chart from './SurveySubmissionsChart';
 import { AnswerTable } from './AnswerTable';
 
+const CHART_TYPES: SurveyQuestion['type'][] = [
+  'numeric',
+  'slider',
+  'radio',
+  'checkbox',
+];
+
 function isMapEntry(
   entry: AnswerEntry,
 ): entry is AnswerEntry & { type: 'map' } {
@@ -317,27 +324,29 @@ export default function SurveySubmissionsPage() {
         }
         sidePaneStyle={{ overflowY: 'auto' }}
         sidePane={
-          <Box>
-            <Chart
-              submissions={submissions}
-              selectedQuestion={selectedQuestion}
-            />
-            {selectedQuestion?.type === 'free-text' && (
+          <>
+            {CHART_TYPES.includes(selectedQuestion.type) ? (
+              <Chart
+                submissions={submissions}
+                selectedQuestion={selectedQuestion}
+              />
+            ) : selectedQuestion?.type === 'free-text' ? (
               <AnswerTable submissions={submissions} />
+            ) : (
+              <AnswerMap
+                survey={survey}
+                submissions={submissions}
+                selectedQuestion={selectedQuestion}
+                onAnswerClick={(answer) => {
+                  setSelectedAnswer(answer);
+                }}
+                onSelectQuestion={(question) => setSelectedQuestion(question)}
+                selectedAnswer={selectedAnswer}
+                surveyQuestions={surveyQuestions}
+                questions={questions}
+              />
             )}
-            <AnswerMap
-              survey={survey}
-              submissions={submissions}
-              selectedQuestion={selectedQuestion}
-              onAnswerClick={(answer) => {
-                setSelectedAnswer(answer);
-              }}
-              onSelectQuestion={(question) => setSelectedQuestion(question)}
-              selectedAnswer={selectedAnswer}
-              surveyQuestions={surveyQuestions}
-              questions={questions}
-            />
-          </Box>
+          </>
         }
         mobileDrawer={{
           open: mobileDrawerOpen,