M3 Integration fixes
This commit is contained in:
Mark Gregory
@@ -0,0 +1,278 @@
|
||||
@extends('m3::liberty-theme.layout.main')
|
||||
@section('title')
|
||||
Solon Sentinel Portal
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="container-fluid px-4">
|
||||
<h1 class="mt-4">Executive Dashboard</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="inputWhs" class="col-sm-2 col-form-label">Warehouse</label>
|
||||
<div class="col-sm-10">
|
||||
<select aria-label="Whs" name="whs" class="form-control">
|
||||
<option value="*ALL">*ALL</option>
|
||||
@foreach($whs_array as $key)
|
||||
<option value={{$key}}
|
||||
@if($whs==$key) selected @endif
|
||||
>{{$key}}</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">
|
||||
@foreach($data as $key=>$value)
|
||||
<div class="col-xl-6">
|
||||
<div class="card mb-12">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-chart-bar me-1"></i>
|
||||
{{($key=="IC")?'INTERCO':'EXTERNAL'}}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<figure class="highcharts-figure">
|
||||
<div id="container{{($key=='IC')?'1':'2'}}"></div>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row" style="margin-top:20px;">
|
||||
@foreach($data as $key=>$value)
|
||||
<div class="col-sm-6">
|
||||
<div class="card text-white bg-info mb-3" id="div2">
|
||||
<div class="card-header"><h5 class="card-title">{{($key=="IC")?'INTERCO':'EXTERNAL'}} <span class="text-end">$ {{ number_format($data[$key]['total'], 0, '.', ',') }}</span></h5></div>
|
||||
<div class="card-body">
|
||||
<b>Held</b>: $ {{ number_format($data[$key]['HLD'], 0, '.', ',') }}<br>
|
||||
┗ <b>Financial Hold</b>: $ {{ number_format($data[$key]['FinHld'], 0, '.', ',') }} ($ {{ number_format($data[$key]['FinFutHld'], 0, '.', ',') }} is >{{env('FDATE')}} in future)<br>
|
||||
┃ ┗ <b>Reserved On Pick</b>: $ {{ number_format($data[$key]['FHResPick'], 0, '.', ',') }}<br>
|
||||
┃ ┗ <b>Reserved No Pick</b>: $ {{ number_format($data[$key]['FHResNoPick'], 0, '.', ',') }}<br>
|
||||
┃ ┗ <b>Not reserved</b>: $ {{ number_format($data[$key]['FHNres'], 0, '.', ',') }}<br>
|
||||
┗ <b>Customer Hold</b>: $ {{ number_format($data[$key]['CusHld'], 0, '.', ',') }} ($ {{ number_format($data[$key]['CusFutHld'], 0, '.', ',') }} is >{{env('FDATE')}} in future)<br>
|
||||
┃ ┗ <b>Reserved On Pick</b>: $ {{ number_format($data[$key]['CHResPick'], 0, '.', ',') }}<br>
|
||||
┃ ┗ <b>Reserved No Pick</b>: $ {{ number_format($data[$key]['CHResNoPick'], 0, '.', ',') }}<br>
|
||||
┃ ┗ <b>Not reserved</b>: $ {{ number_format($data[$key]['CHNres'], 0, '.', ',') }}<br>
|
||||
<b>Avail</b>: $ {{ number_format($data[$key]['Avail'], 0, '.', ',') }} ($ {{ number_format($data[$key]['futNH'], 0, '.', ',') }} is >{{env('FDATE')}} in future)<br>
|
||||
┗ ┗ <b>Reserved On Pick</b>: $ {{ number_format($data[$key]['AvResPick'], 0, '.', ',') }}<br>
|
||||
┗ ┗ <b>Reserved No Pick Fill Code 1</b>: $ {{ number_format($data[$key]['AvResNoPickFillCode1'], 0, '.', ',') }}<br>
|
||||
┗ ┗ <b>Reserved No Pick</b>: $ {{ number_format($data[$key]['AvResNoPick'], 0, '.', ',') }}<br>
|
||||
┗ <b>Not reserved</b>: $ {{ number_format($data[$key]['AvUNres'], 0, '.', ',') }}<br>
|
||||
<b>No Early</b>: $ {{ number_format($data[$key]['NoE'], 0, '.', ',') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
|
||||
var s1 = $('#div1').height();
|
||||
var s2 = $('#div2').height();
|
||||
if (s1 > s2){
|
||||
$('#div2').css('height', s1 + "px");
|
||||
}else{
|
||||
$('#div1').css('height', s2 + "px");
|
||||
}
|
||||
|
||||
@foreach ($data as $key=>$value)
|
||||
var data{{$key}} = [
|
||||
{id: '0.0',parent: '', name: 'Total', value: '{{ $data[$key]['total'] }}'},
|
||||
{ id: '1.1', parent: '0.0', name: 'Held', value: '{{ $data[$key]['HLD'] }}'},
|
||||
{ id: '1.1.1', parent: '1.1', name: 'Financial Hold', value: '{{ $data[$key]['FinHld'] }}'},
|
||||
{ id: '1.1.1.1', parent: '1.1.1', name: 'Reserved', value: '{{ $data[$key]['FHResPick'] }}'},
|
||||
{ id: '1.1.1.2', parent: '1.1.1', name: 'Reserved', value: '{{ $data[$key]['FHResNoPick'] }}'},
|
||||
{ id: '1.1.1.3', parent: '1.1.1', name: 'Not reserved', value: '{{ $data[$key]['FHNres'] }}'},
|
||||
{ id: '1.1.2', parent: '1.1', name: 'Customer Hold', value: '{{ $data[$key]['CusHld'] }}'},
|
||||
{ id: '1.1.2.1', parent: '1.1.2', name: 'Reserved', value: '{{ $data[$key]['CHResPick'] }}'},
|
||||
{ id: '1.1.2.2', parent: '1.1.2', name: 'Reserved', value: '{{ $data[$key]['CHResNoPick'] }}'},
|
||||
{ id: '1.1.2.3', parent: '1.1.2', name: 'Not reserved', value: '{{ $data[$key]['CHNres'] }}'},
|
||||
{ id: '1.2', parent: '0.0', name: 'Avail', value: '{{ $data[$key]['Avail'] }}'},
|
||||
{ id: '1.2.1', parent: '1.2', name: 'Avail', value: '{{ $data[$key]['Avail'] }}'},
|
||||
{ id: '1.2.1.1', parent: '1.2.1', name: 'Reserved On Pick', value: '{{ $data[$key]['AvResPick'] }}'},
|
||||
{ id: '1.2.1.2', parent: '1.2.1', name: 'Reserved No Pick', value: '{{ $data[$key]['AvResNoPick'] }}'},
|
||||
{ id: '1.2.1.3', parent: '1.2.1', name: 'Reserved No Pick Fill Code 1', value: '{{ $data[$key]['AvResNoPickFillCode1'] }}'},
|
||||
{ id: '1.2.1.4', parent: '1.2.1', name: 'Not reserved', value: '{{ $data[$key]['AvUNres'] }}'},
|
||||
{ id: '1.3', parent: '0.0', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'},
|
||||
{ id: '1.3.1', parent: '1.3', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'},
|
||||
{ id: '1.3.1.1', parent: '1.3.1', name: 'No Early', value: '{{ $data[$key]['NoE'] }}'}
|
||||
];
|
||||
@endforeach
|
||||
|
||||
Highcharts.chart('container1', {
|
||||
chart: { height: '100%'},
|
||||
colors: ['transparent'].concat(Highcharts.getOptions().colors),
|
||||
title: { text: 'Interco Chart'},
|
||||
|
||||
series: [{
|
||||
type: 'sunburst',
|
||||
data: dataIC,
|
||||
|
||||
allowDrillToNode: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
format: '{point.name}',
|
||||
filter: {
|
||||
property: 'innerArcLength',
|
||||
operator: '>',
|
||||
value: 16
|
||||
},
|
||||
rotationMode: 'circular'
|
||||
},
|
||||
levels: [{
|
||||
level: 1,
|
||||
levelIsConstant: false,
|
||||
dataLabels: {
|
||||
filter: {
|
||||
property: 'outerArcLength',
|
||||
operator: '>',
|
||||
value: 64
|
||||
}
|
||||
}
|
||||
}, {
|
||||
level: 2,
|
||||
colorByPoint: true
|
||||
},
|
||||
{
|
||||
level: 3,
|
||||
colorVariation: {
|
||||
key: 'brightness',
|
||||
to: -0.5
|
||||
}
|
||||
}, {
|
||||
level: 4,
|
||||
colorVariation: {
|
||||
key: 'brightness',
|
||||
to: 0.5
|
||||
}
|
||||
}]
|
||||
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '',
|
||||
pointFormat: '<b>{point.name}</b> is <b>$ {point.value:,.1f}</b>'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Highcharts.chart('container2', {
|
||||
chart: { height: '100%' },
|
||||
colors: ['transparent'].concat(Highcharts.getOptions().colors),
|
||||
title: { text: 'External Chart' },
|
||||
|
||||
series: [{
|
||||
type: 'sunburst',
|
||||
data: dataEX,
|
||||
|
||||
allowDrillToNode: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
format: '{point.name}',
|
||||
filter: {
|
||||
property: 'innerArcLength',
|
||||
operator: '>',
|
||||
value: 16
|
||||
},
|
||||
rotationMode: 'circular'
|
||||
},
|
||||
levels: [{
|
||||
level: 1,
|
||||
levelIsConstant: false,
|
||||
dataLabels: {
|
||||
filter: {
|
||||
property: 'outerArcLength',
|
||||
operator: '>',
|
||||
value: 64
|
||||
}
|
||||
}
|
||||
}, {
|
||||
level: 2,
|
||||
colorByPoint: true
|
||||
},
|
||||
{
|
||||
level: 3,
|
||||
colorVariation: {
|
||||
key: 'brightness',
|
||||
to: -0.5
|
||||
}
|
||||
}, {
|
||||
level: 4,
|
||||
colorVariation: {
|
||||
key: 'brightness',
|
||||
to: 0.5
|
||||
}
|
||||
}]
|
||||
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '',
|
||||
pointFormat: '<b>{point.name}</b> is <b>$ {point.value:,.1f}</b>'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
$(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
|
||||
Reference in New Issue
Block a user