ProgressBar.tsx

import React, { useEffect, useState } from "react";
import { Col, Container, Row } from "react-bootstrap";

interface Progress {
    completionPercentage: number;
    unansweredPercentage: number;
    totalPages: number;
    pageTitle: string;
}

function ProgressBar({ surveyModel, pageNoSetter, pageNo}) {
    const [progress, setProgress] = useState<Progress[]>([]);

    const filterCallback = (question) => {
        if (question.value === null || question.value === undefined || question.value === "") {
            return false;
        } // For text and comment and other types
        if (question.getType() === "checkbox" && question.value.length == 0) {
            return false;
        }//For empty checkbox
        if (question.getType() === "multipletext" &&
            ((Object.keys(question.value).length === 1
                && Object.values(question.value)[0] === undefined)
                || Object.keys(question.value).length === 0)) {
            return false
        }// For empty multipletext
        return true;
    };

    useEffect(() => {
        const calculateProgress = (survey) => {
            if (survey && survey.pages) {
                const progressArray: Progress[] = [];
                survey.pages.forEach((page) => {
                    const sectionQuestions = page.questions.filter(
                        (question) => question.startWithNewLine
                    );
                    const questionCount = sectionQuestions.length;
                    const answeredCount = sectionQuestions.filter(filterCallback).length;
                    const unansweredCount = questionCount - answeredCount;
                    const completionPercentage = answeredCount / questionCount;

                    progressArray.push({
                        completionPercentage: completionPercentage * 100,
                        unansweredPercentage: (unansweredCount / questionCount) * 100,
                        totalPages: survey.pages.length,
                        pageTitle: page.title,
                    });
                });
                setProgress(progressArray);
            }
        };

        surveyModel.onValueChanged.add((sender) => {
            calculateProgress(sender);
        });

        calculateProgress(surveyModel);
    }, [surveyModel]);

    const progressBarStyle: React.CSSProperties = {
        height: "0.5rem",
        transition: "width 0.3s ease",
    };

    return (
        <Container className="survey-progress">
            <Row>
                {progress.map((sectionProgress, index) => (
                    <Col xs={12} md key={index} onClick={() => pageNoSetter(index)} style={{ cursor: "pointer", margin: '0.5rem' }}>
                        <div>
                            <span style={{
                                whiteSpace: "nowrap",
                                fontSize: "1.5rem",
                                marginRight: "0.25rem",
                                fontWeight: "bold",
                                color: "#2db394",
                            }}>{index + 1}</span>
                            <span style={{
                                whiteSpace: "nowrap",
                                ...(pageNo == index) && {
                                    fontWeight: "bold",
                                },
                            }}>{sectionProgress.pageTitle}</span>
                            <div style={{ display: "flex", flexWrap: "wrap" }}>

                                <div style={{
                                    ...progressBarStyle,
                                    width: `${sectionProgress.completionPercentage}%`,
                                    backgroundColor: "#262261",
                                }} />
                                <div style={{
                                    ...progressBarStyle,
                                    width: `${sectionProgress.unansweredPercentage}%`,
                                    backgroundColor: "#cdcdcd",
                                }} />

                            </div>
                        </div>

                    </Col>

                ))}
            </Row>
        </Container>);
}

export default ProgressBar;