customPrints/MonthlyProgressReport.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link href='https://fonts.googleapis.com/css?family=Mukta' rel='stylesheet'>
    <style>
        @media screen {
            .container {
                display: flex;
                flex-direction: column;
                margin-top: 10px;
                margin-left: 25%;
                margin-right: 25%;
            }

            .date-container {
                display: flex;
                flex-direction: row;
                flex-flow: row wrap;
                -webkit-align-content: space-between;
                justify-content: space-between;
                margin-top: 5px;
                margin-bottom: 10px;
            }

            .jcalendar .jcalendar-content {
                margin-left: 300px;
            }

            .jcalendar-controls {
                display: none !important;
            }

            #data-container {
                pointer-events: none;
            }
        }

        @media print {
            .container {
                display: flex;
                flex-direction: column;
                margin-top: 10px;
            }

            .date-container {
                display: none;
            }

            /*this enables background graphics automatically, works only in chrome*/
            * {
                -webkit-print-color-adjust: exact;
            }
        }

        @media all {
            body {
                font-family: 'Mukta';
                font-size: 16px;
            }

            .header {
                display: flex;
                align-items: center;
                background-color: darkgray;
                padding-left: 10px;
                padding-right: 10px;
                height: 40px;
            }

            .section {
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                margin-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .row {
                display: flex;
                flex-direction: row;
                flex-flow: row wrap;
                -webkit-align-content: space-between;
                justify-content: space-between;
                margin-bottom: 5px;
            }

            .month-data {
                padding-left: 10px;
                padding-right: 10px;
                background-color: #D0D0D0;
                font-size: 16px;
            }

            .title {
                font-weight: normal;
            }

            .data {
                font-weight: bold;
            }

            .wfa-title {
                height: 25px;
                display: flex;
                align-items: center;
                font-weight: normal;
                background-color: #D0D0D0;
                width: 48%;
            }

            .wfa-data {
                height: 25px;
                display: flex;
                align-items: center;
                font-weight: bold;
                width: 40%;
                padding-left: 15px;
                padding-right: 15px;
                justify-content: flex-end;
            }

            .canvas-data {
                width: 320px;
                height: 150px;
                border: 1px solid black;
            }

            .full-width {
                width: 430px;
                height: 220px;
                border: 1px solid black;
            }

        }

    </style>
    <title>Monthly Progress Report</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script>
    <script src="https://jsuites.net/v4/jsuites.js"></script>
    <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css"/>
    <script>

        function openPrint() {
            window.print();
        }

        function properValue(value) {
            return Math.max(0, value)
        }

        function getTimeSpend(now, enrolmentDateTime) {
            const years = now.diff(enrolmentDateTime, 'year');
            enrolmentDateTime.add(years, 'years');
            const months = now.diff(enrolmentDateTime, 'months');
            enrolmentDateTime.add(months, 'months');
            const days = now.diff(enrolmentDateTime, 'days');
            return {years: properValue(years), months: properValue(months), days: properValue(days)};
        }

        function getScheduledOrEncounterDate(enc) {
            return enc['Earliest scheduled date'] || enc['Encounter date time']
        }

        function getAttendanceData({present, absent}, i18n) {
            const data = {
                labels: [
                    i18n('Present'),
                    i18n('Absent')
                ],
                datasets: [{
                    data: [present, absent],
                    backgroundColor: [
                        'rgb(56,167,132)',
                        'rgb(255,99,132)'
                    ],
                    hoverOffset: 4
                }]
            };
            return {
                type: 'pie',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: i18n('Attendance in this month')
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value, ctx) => {
                                let datasets = ctx.chart.data.datasets;
                                if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
                                    let sum = datasets[0].data.reduce((a, b) => a + b, 0);
                                    return `${Math.round((value / sum) * 100)}%`;
                                } else {
                                    return value;
                                }
                            },
                            color: '#fff',
                            display: 'auto'
                        },
                    }
                },
            };
        }

        function getStandardWeightData(gender) {
            const wfaMale = [3.3, 4.5, 5.6, 6.4, 7, 7.5, 7.9, 8.3, 8.6, 8.9, 9.2, 9.4, 9.6, 9.9, 10.1, 10.3, 10.5, 10.7, 10.9, 11.1, 11.3, 11.5, 11.8, 12, 12.2, 12.4, 12.5, 12.7, 12.9, 13.1, 13.3, 13.5, 13.7, 13.8, 14, 14.2, 14.3, 14.5, 14.7, 14.8, 15, 15.2, 15.3, 15.5, 15.7, 15.8, 16, 16.2, 16.3, 16.5, 16.7, 16.8, 17, 17.2, 17.3, 17.5, 17.7, 17.8, 18, 18.2, 18.3];
            const wfaFemale = [3.2, 4.2, 5.1, 5.8, 6.4, 6.9, 7.3, 7.6, 7.9, 8.2, 8.5, 8.7, 8.9, 9.2, 9.4, 9.6, 9.8, 10, 10.2, 10.4, 10.6, 10.9, 11.1, 11.3, 11.5, 11.7, 11.9, 12.1, 12.3, 12.5, 12.7, 12.9, 13.1, 13.3, 13.5, 13.7, 13.9, 14, 14.2, 14.4, 14.6, 14.8, 15, 15.2, 15.3, 15.5, 15.7, 15.9, 16.1, 16.3, 16.4, 16.6, 16.8, 17, 17.2, 17.3, 17.5, 17.7, 17.9, 18, 18.2];
            return gender === 'Male' ? wfaMale : wfaFemale;
        }

        function getStandardHeightData(gender) {
            const wfhMale = [49.9, 54.7, 58.4, 61.4, 63.9, 65.9, 67.6, 69.2, 70.6, 72, 73.3, 74.5, 75.7, 76.9, 78, 79.1, 80.2, 81.2, 82.3, 83.2, 84.2, 85.1, 86, 86.9, 87.8, 88, 88.8, 89.6, 90.4, 91.2, 91.9, 92.7, 93.4, 94.1, 94.8, 95.4, 96.1, 96.7, 97.4, 98, 98.6, 99.2, 99.9, 100.4, 101, 101.6, 102.2, 102.8, 103.3, 103.9, 104.4, 105, 105.6, 106.1, 106.7, 107.2, 107.8, 108.3, 108.9, 109.4, 110];
            const wfhFemale = [49.1, 53.7, 57.1, 59.8, 62.1, 64, 65.7, 67.3, 68.7, 70.1, 71.5, 72.8, 74, 75.2, 76.4, 77.5, 78.6, 79.7, 80.7, 81.7, 82.7, 83.7, 84.6, 85.5, 86.4, 86.6, 87.4, 88.3, 89.1, 89.9, 90.7, 91.4, 92.2, 92.9, 93.6, 94.4, 95.1, 95.7, 96.4, 97.1, 97.7, 98.4, 99, 99.7, 100.3, 100.9, 101.5, 102.1, 102.7, 103.3, 103.9, 104.5, 105, 105.6, 106.2, 106.7, 107.3, 107.8, 108.4, 108.9, 109.4];
            return gender === 'Male' ? wfhMale : wfhFemale;
        }

        function getTrendData(encounters, property, dob, standardData, ylabel, i18n) {
            const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60];
            const dataSetData = [];
            _.forEach(encounters, enc => {
                const value = _.get(enc, ['observations', property]);
                if (value) {
                    dataSetData.push({
                        x: moment(enc["Encounter date time"]).diff(moment(dob), 'months'),
                        y: value
                    });
                }
            });
            const data = {
                labels: months,
                datasets: [
                    {
                        label: i18n(`Actual ${property} for Age`),
                        data: dataSetData,
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    },
                    {
                        label: i18n(`Ideal ${property} for Age`),
                        data: standardData,
                        fill: false,
                        borderColor: 'rgb(192,184,97)',
                        tension: 0.2,
                        pointRadius: 2,
                    }
                ]
            };

            return {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: i18n(`${property} Growth Over Time`),
                        fontFamily: 'Mukta',
                        padding: 5
                    },
                    legend: {
                        display: true,
                        labels: {
                            fontFamily: 'Mukta',
                        }
                    },
                    plugins: {
                        datalabels: {
                            display: false
                        },
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: i18n('Age in months'),
                                fontFamily: 'Mukta',
                                padding: 5
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: ylabel
                            }
                        }]
                    }
                },
            };
        }

        async function fetchGroupEncounter(groupSubjectUUID, options, memberSubjectUUID, selectedDate) {
            const monthsStartingDate = moment(selectedDate).startOf('month').startOf('day');
            const encounterAPI = `/api/encounters?encounterType=Daily Attendance Form&subjectId=${groupSubjectUUID}&lastModifiedDateTime=${monthsStartingDate.toISOString()}&size=100&page=0`;
            const encounters = await fetch(encounterAPI, options).then(res => res.json()).then(data => data.content);
            var present = 0;
            var absent = 0;
            _.forEach(encounters, enc => {
                const scheduledOrEncounterDate = getScheduledOrEncounterDate(enc);
                if (moment(scheduledOrEncounterDate).isSame(monthsStartingDate, 'year') && moment(scheduledOrEncounterDate).isSame(monthsStartingDate, 'month')) {
                    const childrenPresentInPhulwari = _.get(enc, ['observations', 'Children present in phulwari'], []);
                    _.includes(childrenPresentInPhulwari, memberSubjectUUID) ? present += 1 : absent += 1;
                }
            });
            return present || absent ? {present: present, absent: absent} : {};
        }

        function getSelectedDate() {
            // const dateValue = document.getElementById('report-date').value;
            //Feb month is not shown properly by value attribute so doing it this way
            const month = document.getElementsByClassName('jcalendar-month')[0].innerHTML;
            const year = document.getElementsByClassName('jcalendar-year')[0].innerHTML;
            if (_.isEmpty(month) || _.isEmpty(year)) {
                return moment()
            } else {
                return moment().set('month', month).set('year', year).endOf('month')
            }
        }

        async function fetchSubjectInfo() {
            document.getElementById('data-container').style.display = 'none';
            document.getElementById('exited-container').style.display = 'none';
            const url = new URL(window.location.href);
            const options = {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'user-name': url.searchParams.get("user-name"),
                    'AUTH-TOKEN': url.searchParams.get("AUTH-TOKEN"),
                    // 'user-name': 'azadsingh@jss',
                    //'user-name': 'viveks@jssuat',
                }
            };
            let subjectUUID = url.searchParams.get("subjectUUIDs");
            const subjectAPI = `/api/subject/${subjectUUID}`;
            const enrolmentAPI = `/api/programEnrolments?program=Child&subject=${subjectUUID}`;
            const groupSubjectAPI = `/api/groupSubjects?memberSubjectId=${subjectUUID}`;
            const translationAPI = `/web/translations?locale=hi_IN`;

            const translations = await fetch(translationAPI, options).then(res => res.json()).then(d => _.get(d, ['hi_IN', 'translations']));
            const i18n = (str) => _.get(translations, [str], str);
            const subject = await fetch(subjectAPI, options).then(res => res.json());
            const subjectObservations = subject.observations;
            const enrolment = await fetch(enrolmentAPI, options).then(res => res.json()).then(data => data.content);
            const latestEnrolment = _.find(enrolment, enl => !enl["Voided"]);
            const isExited = !_.isNil(latestEnrolment["Exit datetime"]);
            const selectedDate = getSelectedDate();
            document.getElementById('date-label').innerHTML = Mustache.render(i18n('Select month and year'));
            if (isExited && moment(latestEnrolment["Exit datetime"]).isSameOrBefore(selectedDate, 'month')) {
                document.getElementById('exited-container').style.display = 'block';
                document.getElementById('print-container').style.display = 'none';
                document.getElementById('exit-msg1').innerHTML = Mustache.render(i18n('Report cannot be generated as child has exited the program'));
                document.getElementById('exit-msg2').innerHTML = Mustache.render(i18n('Please choose previous months to generate older reports'));
                return ;
            }
            const programEnrolmentId = _.get(latestEnrolment, 'ID', null);
            //TODO: assuming encounters will be less than 200. Handle pagination properly later if count exceeds
            const programEncounterAPI = `/api/programEncounters?encounterType=Anthropometry Assessment&programEnrolmentId=${programEnrolmentId}&size=200&page=0`;
            const encounters = _.isEmpty(programEnrolmentId) ? [] : await fetch(programEncounterAPI, options).then(res => res.json()).then(data => data.content);
            const phulwariGroupSubject = await fetch(groupSubjectAPI, options).then(res => res.json())
                .then(data => _.find(_.get(data, 'content', []), content => content['Group subject']['Subject type'] === 'Phulwari' && content['Role'] === 'Phulwari Child'));
            const attendanceData = _.isEmpty(phulwariGroupSubject) ? {} : await fetchGroupEncounter(phulwariGroupSubject['Group subject']['ID'], options, subjectUUID, selectedDate);
            const filteredEncounters = _.sortBy(_.filter(encounters, enc => !enc['Voided'] && !_.isNil(enc['Encounter date time']) && moment(getScheduledOrEncounterDate(enc)).isSameOrBefore(selectedDate)), enc => getScheduledOrEncounterDate(enc));
            const enrolmentDateTime = moment(_.get(latestEnrolment, 'Enrolment datetime', null));
            const {years, months, days} = getTimeSpend(selectedDate, enrolmentDateTime);

            const selectedMonthEncounter = _.findLast(filteredEncounters, enc => {
                const scheduledOrEncounterDate = getScheduledOrEncounterDate(enc);
                return moment(scheduledOrEncounterDate).isSame(selectedDate, 'year') && moment(scheduledOrEncounterDate).isSame(selectedDate, 'month')
            });
            const height = _.get(selectedMonthEncounter, ['observations', 'Height']);
            const weight = _.get(selectedMonthEncounter, ['observations', 'Weight']);
            if (_.isEmpty(attendanceData)) {
                document.getElementById('attendance-data').style.display = 'none';
                document.getElementById('no-attendance-data').style.display = 'block';
                document.getElementById('no-attendance-data-msg').innerText = i18n('Attendance data not available for this month');
            } else {
                document.getElementById('attendance-data').style.display = 'block';
                document.getElementById('no-attendance-data').style.display = 'none';
                const attendanceGraph = new Chart(document.getElementById('attendanceGraph'), getAttendanceData(attendanceData, i18n));
            }
            const weightTrend = new Chart(document.getElementById('weightTrend'), getTrendData(filteredEncounters, 'Weight', subjectObservations["Date of birth"], getStandardWeightData(subjectObservations["Gender"]), `${i18n('Weight')} (kg)`, i18n));
            const heightTrend = new Chart(document.getElementById('heightTrend'), getTrendData(filteredEncounters, 'Height', subjectObservations["Date of birth"], getStandardHeightData(subjectObservations["Gender"]), `${i18n('Height')} (cm)`, i18n));

            const view = {
                name: `${subjectObservations["First name"]} ${subjectObservations["Last name"]}`,
                dob: moment(subjectObservations["Date of birth"]).format('L'),
                father: subjectObservations["Father's Name"],
                mother: subjectObservations["Mother's Name"],
                timeInPhulwari: `${years} ${i18n('Year')} ${months} ${i18n('Month')} ${days} ${i18n('Day')}`,
                wfaStatus: i18n(_.head(_.get(selectedMonthEncounter, ['observations', 'Weight for age Status'], ['Grade not available']))),
                phulwari: i18n(_.get(latestEnrolment, ['observations', 'Phulwari'], '')),
                reportForMonth: `${i18n(moment(selectedDate).format('MMMM'))} ${moment(selectedDate).format('YYYY')}`,
                progressReport: i18n('Progress Report'),
                nameLabel: i18n("Name"),
                dobLabel: i18n("Date of birth"),
                fatherLabel: i18n("Father's name"),
                motherLabel: i18n("Mother's name"),
                timeLabel: i18n("Time spent in Phulwari"),
                keyFacts: i18n("Key facts from this months data"),
                wfaLabel: i18n("Grade of the child"),
                heightLabel: `${i18n("Last height")}`,
                weightLabel: `${i18n("Last weight")}`,
                growth: i18n("Overall Growth"),
                height: height ? `${height} cm` : i18n('Height not taken this month'),
                weight: weight ? `${weight} kg` : i18n('Weight not taken this month'),
            };

            const wfaStyleMap = {
                [i18n('Normal')]: {backgroundColor: 'green', color: 'rgba(0,0,0,0.63)'},
                [i18n('Moderately Underweight')]: {backgroundColor: 'yellow', color: 'black'},
                [i18n('Severely Underweight')]: {backgroundColor: 'red', color: 'black'}
            };
            const {color, backgroundColor} = _.get(wfaStyleMap, [view.wfaStatus], {
                backgroundColor: '#D0D0D0',
                color: 'black'
            });
            document.getElementById("name-label").innerHTML = Mustache.render(`{{nameLabel}}: `, view);
            document.getElementById("dob-label").innerHTML = Mustache.render(`{{dobLabel}}: `, view);
            document.getElementById("father-label").innerHTML = Mustache.render(`{{fatherLabel}}: `, view);
            document.getElementById("mother-label").innerHTML = Mustache.render(`{{motherLabel}}: `, view);
            document.getElementById("time-label").innerHTML = Mustache.render(`{{timeLabel}}: `, view);
            document.getElementById("key-facts").innerHTML = Mustache.render(`{{keyFacts}}`, view);
            document.getElementById("wfa-label").innerHTML = Mustache.render(`{{wfaLabel}}: `, view);
            document.getElementById("weight-label").innerHTML = Mustache.render(`{{weightLabel}}: `, view);
            document.getElementById("height-label").innerHTML = Mustache.render(`{{heightLabel}}: `, view);
            document.getElementById("growth").innerHTML = Mustache.render(`{{growth}}`, view);
            document.getElementById('phulwari').innerHTML = Mustache.render(`{{phulwari}}`, view);
            document.getElementById('reportForMonth').innerHTML = Mustache.render(`{{reportForMonth}} {{progressReport}}`, view);
            document.getElementById('name').innerHTML = Mustache.render(`{{name}}`, view);
            document.getElementById('dob').innerHTML = Mustache.render(`{{dob}}`, view);
            document.getElementById('fatherName').innerHTML = Mustache.render(`{{father}}`, view);
            document.getElementById('motherName').innerHTML = Mustache.render(`{{mother}}`, view);
            document.getElementById('timeInPhulwari').innerHTML = Mustache.render(`{{timeInPhulwari}}`, view);
            document.getElementById('wfaStatus').innerHTML = Mustache.render(`{{wfaStatus}}`, view);
            document.getElementById('wfaStatus').style.color = color;
            document.getElementById('wfaStatus-container').style.backgroundColor = backgroundColor;
            document.getElementById('height').innerHTML = Mustache.render(`{{height}}`, view);
            document.getElementById('weight').innerHTML = Mustache.render(`{{weight}}`, view);
            document.getElementById('print').innerHTML = Mustache.render(i18n('Print report'));
            document.getElementById('print-container').style.display = 'block';
            document.getElementById('data-container').style.display = 'block';
            setTimeout(openPrint, 1000)
        }

        window.onload = function renderData() {
            fetchSubjectInfo();
            document.getElementById('report-date').value = `${_.upperCase(moment().format('MMM'))}-${moment().format('YYYY')}`
        };
    </script>
</head>
<body>
<div class="container">
    <div class="date-container">
        <div>
            <label id="date-label" for="report-date" class="title"></label>
            <input id="report-date">
            <script>
                jSuites.calendar(document.getElementById('report-date'), {
                    type: 'year-month-picker',
                    format: 'MMM-YYYY',
                    validRange: ['1999-01-01', moment().format('YYYY-MM-DD')],
                    onchange: fetchSubjectInfo
                });
            </script>
        </div>
        <div id="print-container">
            <button onclick="window.print()"><span id="print"></span></button>
        </div>
    </div>
    <div id="exited-container" style="margin-top: 100px;">
        <h2 style="text-align: center" id="exit-msg1"></h2>
        <h2 style="text-align: center" id="exit-msg2"></h2>
    </div>
    <div id="data-container">
        <div class="header">
            <h2></h2>
            <div class="row" style="flex: 1">
                <h3 id="reportForMonth"></h3>
                <h3 id="phulwari"></h3>
            </div>
        </div>
        <div class="section">
            <div class="row">
                <div>
                    <span class="title" id="name-label"></span>
                    <span id="name" class="data"></span>
                </div>
                <div>
                    <span class="title" id="dob-label"></span>
                    <span id="dob" class="data"></span>
                </div>
            </div>
            <div class="row">
                <div>
                    <span class="title" id="father-label"></span>
                    <span id="fatherName" class="data"></span>
                </div>
                <div>
                    <span class="title" id="mother-label"></span>
                    <span id="motherName" class="data"></span>
                </div>
            </div>
            <div class="row">
                <div>
                    <span class="title" id="time-label"></span>
                    <span id="timeInPhulwari" class="data"></span>
                </div>

            </div>
        </div>
        <div class="header">
            <h4 id="key-facts"></h4>
        </div>
        <div class="section">
            <div class="row month-data" style="padding-right: 0">
                <div class="wfa-title" id="wfa-label"></div>
                <div class="wfa-data" id="wfaStatus-container">
                    <span id="wfaStatus"></span>
                </div>
            </div>
            <div class="row month-data">
                <div>
                    <span class="title" id="height-label"></span>
                    <span class="data" id="height"></span>
                </div>
                <div>
                    <span class="title" id="weight-label"></span>
                    <span class="data" id="weight"></span>
                </div>
            </div>
            <div id='no-attendance-data' class="canvas-data" style="margin:0 auto; height: 60px;">
                <h4 style="text-align: center;" id="no-attendance-data-msg"></h4>
            </div>
            <div id="attendance-data" class="canvas-data" style="margin:0 auto;">
                <canvas id="attendanceGraph"></canvas>
            </div>
        </div>
        <div class="header">
            <h4 id="growth">Overall Growth</h4>
        </div>
        <div class="section" style="align-items: center">
            <div class="full-width" style="margin-bottom: 5px">
                <canvas id="weightTrend"></canvas>
            </div>
            <div class="full-width">
                <canvas id="heightTrend"></canvas>
            </div>
        </div>
    </div>
</div>
</body>
</html>