WMS/Modules/M3/Resources/views/liberty-theme/pages/userPickingStats5.blade.php

@extends('m3::liberty-theme.layout.main')
@section('title')
Solon Sentinel Portal - Graph User Efficiency
@endsection
@section('content')
    <!-- /.row -->
    <div class="container-fluid px-4">
        <h1 class="mt-4">Graph User Efficiency</h1>

        <div class="card mb-4">
            <div class="card-header" style="line-height: 34px;">
                <i class="fas fa-table me-1"></i>
                Filters
            </div>
            <div class="card-body">
                <div class="card-body">
                    <form>
                        @csrf
                        <div class="row mb-3">
                            <label for="inputEmail" class="col-sm-2 col-form-label">Date Range</label>
                            <div class="col-sm-10">
                                <label for="text" class="visually-hidden">dates</label>
<input value="{{ $starting }} - {{ $ending }}" id="text" name="dates" type="text"  aria-describedby="textHelpBlock" class="form-control">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="inputUser" class="col-sm-2 col-form-label">User</label>
                            <div class="col-sm-10">
                                <label for="picking_user5" class="visually-hidden">User</label>
                                <select id="picking_user5" name="user" class="form-select">
                                    @foreach($user_array as $key=>$val)
                                        <option value={{$val['userprf']}}
                                                @if($val['userprf']==$user) selected @endif
                                        >{{$val['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-xs-offset-2 col-xs-10">
                                <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-6">
                <div class="card mb-12">
                    <div class="card-header">
                        <i class="fas fa-chart-bar me-1"></i>
                        Picking Performance
                    </div>
                    <div class="card-body">
                        <figure class="highcharts-figure">
                            <div id="container"></div>
                        </figure>
                    </div>
                </div>
            </div>
        </div>

        <div class="row card mt-4 mb-4">
            <div class="card-header">
                <i class="fas fa-table me-1"></i>
                User Picking Stats
            </div>
            <div class="card-body">
                <table class="table table-striped table-bordered table-hover" id="datatablesSimple3">
                    <thead>
                        <tr>
                            <th>Day</th>
                            <th>Performance</th>
                            <th>Blended Target LPH</th>
                            <th>Actual LPH</th>
                            <th>Gross Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($statistic5 as $key=>$val)
                        <tr>
                            <td style="text-align:right"> {{ (isset($val['day']) ? $val['day'] : "") }} </td>
                            <td style="text-align:right"> {{ (isset($val['performance']) ? $val['performance'] : "") }} </td>
                            <td style="text-align:right"> {{ (isset($val['blendedTargetLPH']) ? $val['blendedTargetLPH'] : "") }} </td>
                            <td style="text-align:right"> {{ (isset($val['actualLPH']) ? $val['actualLPH'] : "") }} </td>
                            <td style="text-align:right"> {{ (isset($val['grossHours']) ? $val['grossHours'] : "") }} </td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td style="text-align:right"> Total </td>
                            <td style="text-align:right"> {{ (isset($totals_array['performance']) ? number_format($totals_array['performance'],1) : "") }}% </td>
                            <td style="text-align:right">  </td>
                            <td style="text-align:right">  </td>
                            <td style="text-align:right">  </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <!-- /.row -->

@endsection

@section('scripts')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

    var performance = new Array();
    var days = new Array();
    const months = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

    var x=0;
    @foreach ($statistic5 as $key=>$value)
        //if(typeof {{$value['performance']}}!==null) {
            if({{$value['performance']}}!=0) {
                performance[x] = {{$value['performance']}};
                var in_date = "{{$statistic5[$key]['day']}}";
                var dt  = in_date.split("-");
                days[x] = dt[2]+'<br>'+months[dt[1]-1];
                x=x+1;
            }
        //}
    @endforeach

    var user_name;
    @foreach($user_array as $key=>$val)
        if("{{$val['userprf']}}"=="{{$user}}") {
            user_name="{{$val['name']}}";
        }
    @endforeach

    Highcharts.chart('container', {

        title: {
            text: user_name+' Picking Performance'
        },

        subtitle: {
            text: "{{$starting}} to {{$ending}}"
        },

        yAxis: {
            title: {
                text: 'Percent of Target Lines per Hour'
            }
        },

        xAxis: {
            categories: days
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        series: [{
            data: performance,
            showInLegend: false,
        }],

    });


    $(document).ready(function() {

        // Date range init
        $('input[name="dates"]').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD',
            },
            startDate: '{{ $starting }}',
            endDate: '{{ $ending }}',
            alwaysShowCalendars: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'This Year': [moment().startOf('year'), moment()]
             }
        });

    });

</script>
@endsection