OLAS/app/views/local/managers/admins/overview2.blade.php

@extends('layouts.master_sin_semesterbar')

@section('navigation')
    @include('local.managers.admins._new_navigation')
@stop

@section('main')

    <div>
        <div class="">
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <script type="text/javascript">
                function make_chart(outcomes_info, semesters) {
                    //////// Get values ready for chart
                    var target_line = {{ $target }};
                    var x_label = 'Learning Outcomes';
                    var y_label = 'Percent of students';
                    var outcomes_labels = Array();
                    var i = 0;
                    outcomes_info.forEach(eachOutcome);

                    function eachOutcome(outcome, index) {
                        outcomes_labels.push({
                            v: (index + 1),
                            f: outcome.name
                        });
                        i = i + 1;
                    }

                    //
                    var outcomes_data = Array();

                    var legend = Array();
                    legend.push('');
                    legend.push('Target');
                    $.each(semesters, function(index, semester) {
                        var name = semester.name;
                        name = name.split(' ');
                        var semester_number = name[0];
                        var semester_year = name[2];

                        if (semester_number == 'First') {
                            semester_number = '1';
                        } else if (semester_number == 'Second') {
                            semester_number = '2';
                        }

                        name = semester_year + " Sem " + semester_number;
                        legend.push(name);
                    });
                    outcomes_data.push(legend);

                    //
                    var hidden_values = Array();
                    hidden_values.push(0);
                    hidden_values.push(target_line);
                    var k = 0;
                    while (k < semesters.length) {
                        hidden_values.push(null);
                        k = k + 1;
                    }

                    //
                    outcomes_data.push(hidden_values);
                    // 		console.log(semesters)

                    $.each(outcomes_info, function(index, outcome) {
                        var temp_outcome_grouping_info = Array();
                        temp_outcome_grouping_info.push({
                            v: (index + 1),
                            f: "Students acheiving Learning Outcomes"
                        });
                        temp_outcome_grouping_info.push(target_line);

                        // 		console.log(outcome.semesters)
                        var i = 0;
                        $.each(outcome.semesters, function(index, semester) {

                            // if semester is not the same, insert null.
                            //  else, insert info from expected semester.
                            if (semester.name != semesters[i].name) {
                                while (semester.name != semesters[i].name && i < semesters.length) {
                                    temp_outcome_grouping_info.push(null);
                                    i = i + 1;
                                }
                            }
                            i = i + 1;

                            var total = semester.total_evaluated;
                            var achievers = semester.total_achieved;

                            var percentage = achievers / total;
                            var display_percentage = percentage * 100;
                            temp_outcome_grouping_info.push({
                                v: percentage,
                                f: '\nAchieved by ' + display_percentage.toFixed(2) + '%\n(' + achievers +
                                    ' achievers and ' + total + ' participants)'
                            });
                        });

                        var i = temp_outcome_grouping_info.length;
                        while (i < semesters.length + 2) {
                            temp_outcome_grouping_info.push(null);
                            i = i + 1;
                        }

                        outcomes_data.push(temp_outcome_grouping_info);
                    });
                    var last_hidden_values = [...hidden_values];
                    last_hidden_values[0] = i + 1;
                    outcomes_data.push(last_hidden_values);

                    ////////
                    google.charts.load('current', {
                        packages: ['corechart']
                    }).then(function() {
                        var data = google.visualization.arrayToDataTable(outcomes_data);
                        // var data = google.visualization.arrayToDataTable([
                        //   ['', 'Target', '2020-21 Sem 2', '2021-22 Sem 1', '2021-22 Sem 2'],
                        //   [0, 0.80, null, null, null],
                        //   [{v:1,f:"Students acheiving Learning Outcomes"}, 0.80, {v:0.8275,f:82.75}, {v:0.9075,f:'\nAchieved by '+(90.75).toString()+'%\n(60 achievers and 80 participants)'}, {v:0.8475,f:84.75}],
                        //   [{v:2,f:"Students acheiving Learning Outcomes"}, 0.80, {v:0.7475,f:74.75}, {v:0.8775,f:87.75}, {v:0.9975,f:60.75}],
                        //   [{v:3,f:"Students acheiving Learning Outcomes"}, 0.80, {v:0.6875,f:68.75}, {v:0.9175,f:91.75}, {v:0.8475,f:84.75}],
                        //   [4, 0.80, null, null, null]
                        // ]);

                        var chartDiv = document.getElementById('chart_div');
                        var chart = new google.visualization.ColumnChart(chartDiv);
                        chart.draw(data, {
                            // colors: ['lime', 'magenta'],
                            hAxis: {
                                title: x_label,
                                ticks: outcomes_labels,
                                viewWindow: {
                                    min: 0.5,
                                    max: outcomes_info.length + 0.5 // el total de outcomes + 0.5
                                },
                                textStyle: {
                                    fontSize: 10,
                                    bold: true,
                                }
                            },
                            legend: 'right',
                            series: {
                                0: {
                                    type: 'line'
                                }
                            },
                            title: ' ',
                            chartArea: {
                                width: '70%',
                                // top: 10,
                                // height: '50%'
                            },
                            vAxis: {
                                title: y_label,
                                format: 'percent',
                                viewWindow: {
                                    min: 0,
                                    max: 1
                                }
                            }
                        });
                    });
                }


                // labels for each outcome grouping
                var outcomes_info = <?= json_encode($outcomes, JSON_HEX_TAG) ?>;
                var semesters = <?= json_encode($semesters, JSON_HEX_TAG) ?>;

                // 	console.log(outcomes_info);
                make_chart(outcomes_info, semesters);
            </script>
            <script src="https://www.gstatic.com/charts/loader.js"></script>
            <div class="">
                <div class="filters">
                    <div class="row" style="display: flex;">
                        <div class="category">
                            <label for="is_graduate">Level</label>
                            <div class="select">
                                <select class="selectpicker" name="is_graduate" id="is_graduate">
                                    <option value="0" selected="selected">Undergradute</option>
                                    <option value="1">Graduate</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="display: flex;">
                        <div class="category">
                            <label for="school">School</label>
                            <div class="select">
                                <select multiple class="selectpicker" name="school" id="school">
                                    <option value="0" selected="selected">All</option>
                                    @foreach ($filters['school'] as $school)
                                        <option value="{{ $school->id }}">{{ $school->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="category">
                            <label for="program">Academic Program</label>
                            <div class="select">
                                <select multiple class="selectpicker" name="program" id="program">
                                    <option value="0" selected="selected">All</option>
                                    @foreach ($filters['program'] as $program)
                                        <option value="{{ $program->id }}">{{ $program->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="display: flex;">
                        <div class="category">
                            <label for="semester">Semester</label>
                            <div class="select">
                                <select multiple class="selectpicker" name="semester" id="semester">
                                    <option value="0" selected="selected">All</option>
                                    @foreach ($filters['semester'] as $semester)
                                        <option value="{{ $semester->id }}">{{ $semester->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="category">
                            <label for="year">Academic Year</label>
                            <div class="select">
                                <select multiple class="selectpicker" name="year" id="year">
                                    <option value="0" selected="selected">All</option>
                                    @foreach ($filters['year'] as $year)
                                        <option value="{{ $year->id }}">{{ $year->start }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="category">
                            <label for="outcome">Learning Outcomes</label>
                            <div class="select">
                                <select multiple class="selectpicker" name="outcome" id="outcome">
                                    <option value="0" selected="selected">All</option>
                                    @foreach ($filters['outcome'] as $outcome)
                                        <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <h4 class="container">
                    <b>Percent of Students Achieving Learning Outcomes By Academic Session</b>
                </h4>
                <div class="container" style="height:500px; width:1300px;" id="chart_div"></div>
                <div class="" style="padding-left: 25px;">
                    <h5>
                        <b>Annotation</b>
                    </h5>
                    The target line represents the expected percent of students achieving the learning
                    outcome({{ $target * 100 }}%).
                </div>
            </div>
        </div>
    </div>

@stop

@section('included-js')

    <!-- HighCharts -->
    <script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>

@stop

@section('javascript')


    $(document).ready(function()
    {
    $("#year").parent().parent().parent().hide();



    // when a filter is focused
    var previous;
    $(".category").find("button").focus(function() {
    previous = Array();
    $(this).parent().find("select option:selected").each(function() {
    previous.push(this.value);
    });
    });

    // when a filter is changed
    $(".category").find("select").change(function() {
    var new_value = Array();
    $(this).parent().find("select option:selected").each(function() {
    new_value.push(this.value);
    });

    //if statements so that "All" only can be selected alone and dont allow selecting no options
    if(jQuery.inArray("0",new_value) !== -1 && jQuery.inArray("0",previous) === -1){
    $(this).parent().find("select option:selected").each(function() {
    $(this).removeAttr('selected');
    $(this).parent().val(0);
    //$('.selectpicker').selectpicker('refresh');
    new_value = ["0"];
    });
    }else if(jQuery.inArray("0",new_value) !== -1 && jQuery.inArray("0",previous) !== -1 && new_value.length >
    previous.length){
    $(this).parent().find("select option:selected").each(function() {
    if(this.value == "0"){
    $(this).removeAttr('selected');
    //$('.selectpicker').selectpicker('refresh');
    new_value = Array(new_value[1]);
    }
    });
    }else if(new_value.length == 0){
    $(this).parent().find("select").val(0);
    //$('.selectpicker').selectpicker('refresh');
    new_value = ["0"];
    }
    previous = new_value;


    // get values from all selects
    var schools = $("#school").val();
    var programs = $("#program").val();
    var semesters = $("#semester").val();
    var years = $("#year").val();
    var outcomes = $("#outcome").val();
    var outcomes = $("#outcome").val();
    var is_graduate = $("#is_graduate").val();

    // query the values and get new data for chart
    $.post(
    "{{ URL::action('AdministratorsController@overview2_filter_results') }}",
    {
    schools: (schools),
    programs: (programs),
    semesters: (semesters),
    years: (years),
    outcomes: (outcomes),
    is_graduate: (is_graduate),
    },
    function(data)
    {
    var filters = data.filters;
    var outcomes_info = data.outcomes_info;
    var semesters = data.semesters;

    //////// update chart
    make_chart(outcomes_info,semesters);


    ////////update filters
    var new_all = $('
    <option />',{
    'value': "0",
    'html': "All",
    });;

    {{-- //update school filter
        var school_filter = $("#school");
        var new_school_options = filters.school;
        school_filter.find("option").remove();
        school_filter.append(new_all.clone(true));
        $.each(new_school_options, function(index, school)
        {
          var value = school.id;
          var html = school.name;
          var new_option = $('<option/>',{
            'value': value,
            'html': html,
          });;
          school_filter.append(new_option);
        }); --}}

    //update school filter
    var school_filter = $("#school");
    var school_selected_options = Array();
    school_filter.find("option:selected").each(function() {
    school_selected_options.push(this.value);
    });
    var new_school_options = filters.school;
    school_filter.find("option").remove();
    if(Array("0")[0] == school_selected_options[0]){
    school_filter.append(new_all.clone(true).attr("selected","selected"));
    } else{
    school_filter.append(new_all.clone(true));
    }
    $.each(new_school_options, function(index, school)
    {
    var value = school.id.toString();
    var html = school.name;
    var new_option;
    if(jQuery.inArray(value,school_selected_options) === -1){
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    });;
    }else{
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    'selected': 'selected',
    });;
    }
    school_filter.append(new_option);
    });

    //update semester filter
    var semester_filter = $("#semester");
    var semester_selected_options = Array();
    semester_filter.find("option:selected").each(function() {
    semester_selected_options.push(this.value);
    });
    var new_semester_options = filters.semester;
    semester_filter.find("option").remove();
    if(Array("0")[0] == semester_selected_options[0]){
    semester_filter.append(new_all.clone(true).attr("selected","selected"));
    } else{
    semester_filter.append(new_all.clone(true));
    }
    $.each(new_semester_options, function(index, semester)
    {
    var value = semester.id.toString();
    var html = semester.name;
    var new_option;
    if(jQuery.inArray(value,semester_selected_options) === -1){
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    });;
    }else{
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    'selected': 'selected',
    });;
    }
    semester_filter.append(new_option);
    });

    //update program filter
    var program_filter = $("#program");
    var program_selected_options = Array();
    program_filter.find("option:selected").each(function() {
    program_selected_options.push(this.value);
    });
    var new_program_options = filters.program;
    program_filter.find("option").remove();
    if(Array("0")[0] == program_selected_options[0]){
    program_filter.append(new_all.clone(true).attr("selected","selected"));
    } else{
    program_filter.append(new_all.clone(true));
    }
    $.each(new_program_options, function(index, program)
    {
    var value = program.id.toString();
    var html = program.name;
    var new_option;
    if(jQuery.inArray(value,program_selected_options) === -1){
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    });;
    }else{
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    'selected': 'selected',
    });;
    }
    program_filter.append(new_option);
    });


    //update outcome filter
    var outcome_filter = $("#outcome");
    var outcome_selected_options = Array();
    outcome_filter.find("option:selected").each(function() {
    outcome_selected_options.push(this.value);
    });
    var new_outcome_options = filters.outcome;
    outcome_filter.find("option").remove();
    if(Array("0")[0] == outcome_selected_options[0]){
    outcome_filter.append(new_all.clone(true).attr("selected","selected"));
    } else{
    outcome_filter.append(new_all.clone(true));
    }
    $.each(new_outcome_options, function(index, outcome)
    {
    var value = outcome.id.toString();
    var html = outcome.name;
    var new_option;
    if(jQuery.inArray(value,outcome_selected_options) === -1){
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    });;
    }else{
    new_option = $('
    <option />',{
    'value': value,
    'html': html,
    'selected': 'selected',
    });;
    }
    outcome_filter.append(new_option);
    });


    {{-- //update semester filter
        var semester_filter = $("#semester");
        var new_semester_options = filters.semester;
        semester_filter.find("option").remove();
        semester_filter.append(new_all.clone(true));
        $.each(new_semester_options, function(index, semester)
        {
          var value = semester.id;
          var html = semester.name;
          var new_option = $('<option/>',{
            'value': value,
            'html': html,
          });;
          semester_filter.append(new_option);
        }); --}}


    $('.selectpicker').selectpicker('refresh');
    }
    );

    });

    });



    {{-- @include('global.dummy-outcomes') --}}

@stop