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

@extends('layouts.master')

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

@section('main')

<div>
  <!-- Nav tabs -->
  <ul id="levelTabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#undergraduate" aria-controls="undergraduate" role="tab">Undergraduate</a></li>
    <li role="presentation"><a href="#graduate" aria-controls="graduate" role="tab">Graduate</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="undergraduate">
        <div class="row">
            <div class="col-md-9 graph" id="graph_undergrad"></div>
            <div class="col-md-3">
                <br>
                <div class="panel panel-default panel-scrolling">
                    <div class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            Participating Programs
                        </h4>
                    </div>
                    <div>
                        <table class="table table-striped table-condensed">
                            @foreach ($participating_undergrad_programs as $program)
                                <tr>
                                    <td>{{ HTML::linkAction('ProgramsController@show', $program->name, array($program->id)) }}</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h4>Assessment Results by Learning Outcomes in the Undergraduate Academic Programs</h4>
                <table class="table table-striped table-condensed datatable">
                    <thead>
                        <th>Learning Outcome</th>
                        <th>Undergraduate Programs doing Assessment</th>
                        <th>Undergraduate Programs Achieved</th>
                        <th>Undergraduate Success Rate</th>
                    </thead>
                    <tbody>
                        @foreach($outcomes as $outcome)
                            <tr>
                                <td>{{ link_to_action('OutcomesController@show', $outcome->name, array($outcome->id), $attributes = array()) }}</td>
                                <td>{{{ $attemptedUndergradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>{{{ $achievedUndergradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>
                                    @if($attemptedUndergradProgramsPerOutcome[$outcome->id]!=0)
                                        {{{ round($achievedUndergradProgramsPerOutcome[$outcome->id] / $attemptedUndergradProgramsPerOutcome[$outcome->id]*100, 2) }}}%
                                    @else
                                        N/M
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot></tfoot>
                    <caption>N/M: Not Measured</caption>
                </table>
            </div>
        </div>
    </div>

    <div role="tabpanel" class="tab-pane" id="graduate">
        <div class="row">
            <div class="col-md-9 graph" id="graph_grad">
            </div>
            <div class="col-md-3">
                <br>
                <div class="panel panel-default panel-scrolling">
                    <div class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            Participating Programs
                        </h4>
                    </div>
                    <div>
                        <table class="table table-striped table-condensed">
                            @foreach ($participating_grad_programs as $program)
                                <tr>
                                    <td>{{ HTML::linkAction('ProgramsController@show', $program->name, array($program->id)) }}</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h4>Assessment Results by Learning Outcomes in the Graduate Academic Programs</h4>
                <table class="table table-striped table-condensed datatable">
                    <thead>
                        <th>Learning Outcome</th>
                        <th>Graduate Programs doing Assessment</th>
                        <th>Graduate Programs Achieved</th>
                        <th>Graduate Success Rate</th>
                    </thead>
                    <tbody>
                        @foreach($outcomes as $outcome)
                            <tr>
                                <td>{{ link_to_action('OutcomesController@show', $outcome->name, array($outcome->id), $attributes = array()) }}</td>
                                <td>{{{ $attemptedGradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>{{{ $achievedGradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>
                                    @if($attemptedGradProgramsPerOutcome[$outcome->id]!=0)
                                        {{{ round($achievedGradProgramsPerOutcome[$outcome->id] / $attemptedGradProgramsPerOutcome[$outcome->id]*100, 2) }}}%
                                    @else
                                        N/M
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot></tfoot>
                    <caption>N/M: Not Measured</caption>
                </table>
            </div>
        </div>
    </div>

  </div>
</div>

<!-- <div class="row">
    <div class="col-md-12" id="objectives_count"></div>
</div> -->

@stop

@section('included-js')

<!-- HighCharts -->
<script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>
<!--script src="http://code.highcharts.com/modules/exporting.js"></script -->

<!-- Datatables -->
@include('global._datatables_js')

@stop

@section('javascript')
$(function () {

    $('#levelTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show');


        // Load grad charts after clicking tab, so they are sized correctly.
        $('#graph_undergrad').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Undergraduate Performance by Learning Outcome Criteria (Campus)'
            },
            legend: {
                reversed: true,
            },
            xAxis: {
                categories: [
                    @foreach($outcomes as $outcome)
                        "{{{ $outcome->name }}}",
                    @endforeach
                ],
                labels: {
                    style: {
                        fontSize:'11px'
                    },
                    step:1,
                    useHTML:true,
                    formatter: function() {
                        return '<div style="max-width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                    },
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Percentage'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                bar: {
                    //grouping: false,
                    shadow: false,
                    borderWidth: 0,
                },
                series: {
                pointPadding: 0,
                groupPadding: 0.075
                },
            },
            series: [{
                name: 'Expected Value',
                color: '#555555',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y: -1
                },
                data: [
                    @foreach($outcomes as $index => $outcome)
                        @if(
                            is_array($undergrad_outcomes_attempted)
                            && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
                            && $undergrad_outcomes_attempted[$outcome->id]!=0)
                            {{{ $outcome->expected_outcome }}},
                        @else
                            null,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,
            }, {
                name: 'Obtained Value',
                color: 'rgba(231, 0, 51, 1)',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y:-1
                },
                data:[
                    @foreach($outcomes as $index => $outcome)
                        @if(
                            is_array($undergrad_outcomes_attempted)
                            && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
                            && $undergrad_outcomes_attempted[$outcome->id]!=0)
                            @if (($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 > $outcome->expected_outcome)
                                {y:{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}} },
                            @else
                                {y:{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}}, color:'#e70033' },
                            @endif
                        @else
                            null,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,
            }]
        });

        $('#graph_grad').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Graduate Performance by Learning Outcome Criteria (Campus)'
            },
            legend: {
                reversed: true,
            },
            xAxis: {
                categories: [
                    @foreach($outcomes as $outcome)
                        "{{{ $outcome->name }}}",
                    @endforeach
                ],
                labels: {
                    style: {
                        fontSize:'11px'
                    },
                    step:1,
                    useHTML:true,
                    formatter: function() {
                        return '<div style="width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                    },
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Percentage'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                bar: {
                    //grouping: false,
                    shadow: false,
                    borderWidth: 0,
                },
                series: {
                pointPadding: 0,
                groupPadding: 0.075
                },
            },
            series: [{
                name: 'Expected Value',
                color: '#555555',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y:-1
                },
                data: [
                    @foreach($outcomes as $index => $outcome)
                        @if(
                            is_array($grad_outcomes_attempted)
                            && array_key_exists($outcome->id, $grad_outcomes_attempted)
                            && $grad_outcomes_attempted[$outcome->id]!=0)
                            {{{ $outcome->expected_outcome }}},
                        @else
                            null,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,

            }, {
                name: 'Obtained Value',
                color: '#e70033',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y:-1
                },
                data:[
                    @foreach($outcomes as $index => $outcome)
                        @if(
                            is_array($grad_outcomes_attempted)
                            && array_key_exists($outcome->id, $grad_outcomes_attempted)
                            && $grad_outcomes_attempted[$outcome->id]!=0)
                            {{{ ($grad_outcomes_achieved[$outcome->id]/$grad_outcomes_attempted[$outcome->id])*100 }}},
                        @else
                            null,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,
            }]
        });
    })

    $('#graph_undergrad').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Undergraduate Performance by Learning Outcome Criteria (Campus)'
            },
            legend: {
                reversed: true,
            },
            xAxis: {
                categories: [
                    @foreach($outcomes as $outcome)
                        "{{{ $outcome->name }}}",
                    @endforeach
                ],
                labels: {
                    style: {
                        fontSize:'11px'
                    },
                    step:1,
                    useHTML:true,
                    formatter: function() {
                        return '<div style="max-width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                    },
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Percentage'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                bar: {
                    //grouping: false,
                    shadow: false,
                    borderWidth: 0,
                },
                series: {
                pointPadding: 0,
                groupPadding: 0.075
                },
            },
            series: [{
                name: 'Expected Value',
                color: '#555555',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y: -1
                },
                data: [
                    @foreach($outcomes as $index => $outcome)
                        @if(
                            is_array($undergrad_outcomes_attempted)
                            && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
                            && $undergrad_outcomes_attempted[$outcome->id]!=0)
                            {{{ $outcome->expected_outcome }}},
                        @else
                            null,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,
            },
            {
                name: 'Obtained Value',
                color: 'rgba(231, 0, 51, 1)',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y:-1
                },
                data:[
                    @foreach($outcomes as $index => $outcome)
                        @if(
                            is_array($undergrad_outcomes_attempted)
                            && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
                            && $undergrad_outcomes_attempted[$outcome->id]!=0)
                            {{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}},
                        @else
                            null,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,
            }]
    });


    $('#objectives_count').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Programs Assessing Each Learning Outcome'
        },
        xAxis: {
            categories: [
                @foreach($outcomes as $outcome)
                    "{{{ $outcome->name }}}",
                @endforeach
            ],
            labels: {
                style: {
                    fontSize:'11px'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Programs'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Undergraduate',
            color: '#e70033',
            data:[
                @foreach($outcomes as $outcome)
                    {{{ $attemptedUndergradProgramsPerOutcome[$outcome->id] }}},
                @endforeach
            ],
            pointPadding: 0,
        }]
    });
});

// Include dummy graph for outcomes
@include('global.dummy-outcomes')

@stop