getting results and an excel file

SurveyFrontend/src/components/Results/Results.tsx

@@ -3,12 +3,17 @@ import styles from './Results.module.css';
 import {Bar, Pie} from 'react-chartjs-2';
 import {Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title} from 'chart.js';
 import {useOutletContext} from "react-router-dom";
-import {ISurvey} from "../../api/SurveyApi.ts";
+import {ISurvey, getSurveyById} from "../../api/SurveyApi.ts";
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import Group from '../../assets/gmail_groups.svg?react';
 import Send from '../../assets/send.svg?react';
-
+import {getAllCompletions} from "../../api/CompletionApi.ts";
+import {getAnswer} from "../../api/AnswerApi.ts";
+import {useEffect, useState} from "react";
+import {getListQuestions} from "../../api/QuestionApi.ts";
+import {getAnswerVariants, IAnswerVariant} from "../../api/AnswerVariantsApi.ts";
+import {getResultsFile} from "../../api/ExportResultApi.ts";
 
 ChartJS.register(
     ArcElement, Tooltip, Legend,
@@ -21,47 +26,147 @@ interface QuestionStats {
     options: {
         text: string;
         percentage: number;
+        id: number;
     }[];
-    isMultipleChoice?: boolean;
+    isMultipleChoice: boolean;
+}
+
+interface IAnswer {
+    questionId: number;
+    completionId: number;
+    answerText: string;
+    optionId?: number;
 }
 
 export const Results = () => {
-    const { survey, setSurvey } = useOutletContext<{
+    const { survey: initialSurvey, setSurvey } = useOutletContext<{
         survey: ISurvey;
         setSurvey: (survey: ISurvey) => void;
     }>();
 
-
-    const surveyStats = {
-        totalParticipants: 100,
-        completionPercentage: 80,
+    const [surveyStats, setSurveyStats] = useState({
+        totalParticipants: 0,
+        completionPercentage: 0,
         status: 'Активен',
-        questions: [
-            {
-                questionText: "Вопрос 1",
-                totalAnswers: 80,
-                options: [
-                    { text: "Вариант 1", percentage: 46 },
-                    { text: "Вариант 2", percentage: 15 },
-                    { text: "Вариант 3", percentage: 39 }
-                ],
-                isMultipleChoice: false
-            },
-            {
-                questionText: "Вопрос 2",
-                totalAnswers: 100,
-                options: [
-                    { text: "Вариант 1", percentage: 50 },
-                    { text: "Вариант 2", percentage: 20 },
-                    { text: "Вариант 3", percentage: 100 },
-                    { text: "Вариант 4", percentage: 80 }
-                ],
-                isMultipleChoice: true
-            }
-        ] as QuestionStats[]
+        questions: [] as QuestionStats[]
+    });
+
+    const [survey, setLocalSurvey] = useState<ISurvey>(initialSurvey);
+    // const [questions, setQuestions] = useState<IQuestion[]>([]);
+
+    const handleExportToExcel = async (id: number) => {
+        await getResultsFile(id)
     };
 
-    // Цветовая палитра
+    useEffect(() => {
+        const fetchSurveyData = async () => {
+            try {
+                const surveyData = await getSurveyById(survey.id);
+                setLocalSurvey(surveyData);
+
+                const questionsList = await getListQuestions(survey.id);
+                // setQuestions(questionsList);
+
+                const questionsWithVariants = await Promise.all(
+                    questionsList.map(async (question) => {
+                        const variants = await getAnswerVariants(survey.id, question.id);
+                        return {
+                            ...question,
+                            options: variants,
+                            isMultipleChoice: question.questionType !== 'SingleAnswerQuestion'
+                        };
+                    })
+                );
+
+                const completions = await getAllCompletions(survey.id);
+                const totalParticipants = completions.length;
+
+                const questionsWithAnswers = await Promise.all(
+                    questionsWithVariants.map(async (question) => {
+                        const answers = await getAnswer(question.id);
+                        return {
+                            ...question,
+                            answers: answers
+                        };
+                    })
+                );
+
+                const questionsStats = questionsWithAnswers.map(question => {
+                    const questionAnswers = question.answers as IAnswer[];
+
+                    let uniqueAnswers = questionAnswers;
+                    if (question.isMultipleChoice) {
+                        const groupedByCompletion = questionAnswers.reduce((acc, answer) => {
+                            if (!acc[answer.completionId]) {
+                                acc[answer.completionId] = [];
+                            }
+                            acc[answer.completionId].push(answer);
+                            return acc;
+                        }, {} as Record<number, IAnswer[]>);
+
+                        uniqueAnswers = Object.values(groupedByCompletion).map(group => ({
+                            ...group[0],
+                            answerText: group.map(a => a.answerText).join("; ")
+                        }));
+                    }
+
+                    const optionsStats = question.options.map((option: IAnswerVariant) => {
+                        const count = uniqueAnswers.filter(answer =>
+                            question.isMultipleChoice
+                                ? answer.answerText.includes(option.text)
+                                : answer.answerText === option.text
+                        ).length;
+
+                        const percentage = totalParticipants > 0
+                            ? Math.round((count / totalParticipants) * 100)
+                            : 0;
+
+                        return {
+                            text: option.text,
+                            percentage: percentage,
+                            id: option.id
+                        };
+                    });
+
+                    return {
+                        questionText: question.title,
+                        totalAnswers: uniqueAnswers.length,
+                        options: optionsStats,
+                        isMultipleChoice: question.isMultipleChoice
+                    };
+                });
+
+                const totalAnswersCount = questionsWithAnswers.reduce((sum, question) => {
+                    if (question.isMultipleChoice) {
+                        const uniqueCompletions = new Set(
+                            question.answers.map((answer : IAnswer) => answer.completionId)
+                        );
+                        return sum + uniqueCompletions.size;
+                    } else {
+                        return sum + question.answers.length;
+                    }
+                }, 0);
+
+                const maxPossibleAnswers = questionsWithAnswers.length * totalParticipants;
+                const completionPercentage = totalParticipants > 0 && maxPossibleAnswers > 0
+                    ? Math.round((totalAnswersCount / maxPossibleAnswers) * 100)
+                    : 0;
+
+                setSurveyStats({
+                    totalParticipants,
+                    completionPercentage,
+                    status: 'Активен',
+                    questions: questionsStats
+                });
+
+            } catch (error) {
+                console.error('Error fetching survey data:', error);
+            }
+        };
+
+        fetchSurveyData();
+    }, [survey.id]);
+
     const colorsForPie = ['#67C587', '#C9EAD4', '#EAF6ED'];
     const colorsForBar = ['#8979FF'];
 
@@ -70,8 +175,14 @@ export const Results = () => {
             <SurveyInfo
                 titleSurvey={survey.title}
                 descriptionSurvey={survey.description}
-                setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
-                setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
+                setDescriptionSurvey={(value) => {
+                    setSurvey({ ...survey, description: value });
+                    setLocalSurvey({ ...survey, description: value });
+                }}
+                setTitleSurvey={(value) => {
+                    setSurvey({ ...survey, title: value });
+                    setLocalSurvey({ ...survey, title: value });
+                }}
             />
             <div className={styles.statsContainer}>
                 <div className={`${styles.statItem} ${styles.countAnswer}`}>
@@ -202,6 +313,8 @@ export const Results = () => {
                     </div>
                 </div>
             ))}
+
+            <button className={styles.exportButtonContainer} onClick={() => handleExportToExcel(survey.id)}>Экспорт в excel</button>
         </div>
     );
 };