paad/js/barra.js

function barra(profesor, retardos) {
    profesor.faltas = profesor.total - profesor.asistencias - profesor.retardos - profesor.justificaciones;
    if (profesor.total != 0)
        var porcentajes = {
            "asistencias": profesor.asistencias / profesor.total * 100,
            "retardos": profesor.retardos / profesor.total * 100,
            "justificaciones": profesor.justificaciones / profesor.total * 100,
            "faltas": 100 * profesor.faltas / profesor.total
        }
    else
        var porcentajes = {
            "asistencias": 0,
            "retardos": 0,
            "justificaciones": 0,
            "faltas": 0
        }
    var html = `
<section id="profesor-${profesor.id}">
    <div class="row">
        <div class="col-12">
            <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" style="width: ${porcentajes.asistencias}%" aria-valuenow="${porcentajes.asistencias}" aria-valuemin="0" aria-valuemax="100"></div>
                <!-- Show retardos only if it's set to true -->
                ${retardos ? `<div class="progress-bar bg-warning" role="progressbar" style="width: ${porcentajes.retardos}%" aria-valuenow="${porcentajes.retardos}" aria-valuemin="0" aria-valuemax="100"></div>` : ``}
                <div class="progress-bar bg-azul" role="progressbar" style="width: ${porcentajes.justificaciones}%" aria-valuenow="${porcentajes.justificaciones}" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-info" role="progressbar" style="width: ${porcentajes.faltas}%" aria-valuenow="${porcentajes.faltas}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>

    <!-- Span Asistencias: # Retardos: # Faltas: # -->
    <div class="row justify-content-center">
        <span class="mx-3 mt-1">Asistencias: ${profesor.asistencias}</span>
        ${retardos ? `<span class="mx-3 mt-1">Retardos: ${profesor.retardos}</span>` : `` }
        <span class="mx-3 mt-1">Justificaciones: ${profesor.justificaciones}</span>
        <span class="mx-3 mt-1">Faltas: ${profesor.faltas}</span>
    </div>
</div>
`;
    return html;
}