496 lines
13 KiB
JavaScript
496 lines
13 KiB
JavaScript
/**
|
|
* Logistics Dashboard
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
(function () {
|
|
let labelColor, headingColor;
|
|
|
|
if (isDarkStyle) {
|
|
labelColor = config.colors_dark.textMuted;
|
|
headingColor = config.colors_dark.headingColor;
|
|
} else {
|
|
labelColor = config.colors.textMuted;
|
|
headingColor = config.colors.headingColor;
|
|
}
|
|
|
|
// Chart Colors
|
|
const chartColors = {
|
|
donut: {
|
|
series1: config.colors.success,
|
|
series2: 'rgba(113, 221, 55, 0.6)',
|
|
series3: 'rgba(113, 221, 55, 0.4)',
|
|
series4: 'rgba(113, 221, 55, 0.2)'
|
|
},
|
|
line: {
|
|
series1: config.colors.warning,
|
|
series2: config.colors.primary,
|
|
series3: '#7367f029'
|
|
}
|
|
};
|
|
|
|
// Shipment statistics Chart
|
|
// --------------------------------------------------------------------
|
|
const shipmentEl = document.querySelector('#shipmentStatisticsChart'),
|
|
shipmentConfig = {
|
|
series: [
|
|
{
|
|
name: 'Shipment',
|
|
type: 'column',
|
|
data: [38, 45, 33, 38, 32, 50, 48, 40, 42, 37]
|
|
},
|
|
{
|
|
name: 'Delivery',
|
|
type: 'line',
|
|
data: [23, 28, 23, 32, 28, 44, 32, 38, 26, 34]
|
|
}
|
|
],
|
|
chart: {
|
|
height: 270,
|
|
type: 'line',
|
|
stacked: false,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
markers: {
|
|
size: 4,
|
|
colors: [config.colors.white],
|
|
strokeColors: chartColors.line.series2,
|
|
hover: {
|
|
size: 6
|
|
},
|
|
borderRadius: 4
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: [0, 3],
|
|
lineCap: 'round'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
markers: {
|
|
width: 8,
|
|
height: 8,
|
|
offsetX: -3
|
|
},
|
|
height: 40,
|
|
offsetY: 10,
|
|
itemMargin: {
|
|
horizontal: 10,
|
|
vertical: 0
|
|
},
|
|
fontSize: '15px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400,
|
|
labels: {
|
|
colors: headingColor,
|
|
useSeriesColors: false
|
|
},
|
|
offsetY: 10
|
|
},
|
|
grid: {
|
|
strokeDashArray: 8
|
|
},
|
|
colors: [chartColors.line.series1, chartColors.line.series2],
|
|
fill: {
|
|
opacity: [1, 1]
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '30%',
|
|
startingShape: 'rounded',
|
|
endingShape: 'rounded',
|
|
borderRadius: 4
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
xaxis: {
|
|
tickAmount: 10,
|
|
categories: ['1 Jan', '2 Jan', '3 Jan', '4 Jan', '5 Jan', '6 Jan', '7 Jan', '8 Jan', '9 Jan', '10 Jan'],
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
min: 10,
|
|
max: 50,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400
|
|
},
|
|
formatter: function (val) {
|
|
return val + '%';
|
|
}
|
|
}
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1400,
|
|
options: {
|
|
chart: {
|
|
height: 270
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
fontSize: '10px'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
itemMargin: {
|
|
vertical: 0,
|
|
horizontal: 10
|
|
},
|
|
fontSize: '13px',
|
|
offsetY: 12
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1399,
|
|
options: {
|
|
chart: {
|
|
height: 415
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 982,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '30%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
height: 250
|
|
},
|
|
legend: {
|
|
offsetY: 7
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (typeof shipmentEl !== undefined && shipmentEl !== null) {
|
|
const shipment = new ApexCharts(shipmentEl, shipmentConfig);
|
|
shipment.render();
|
|
}
|
|
|
|
// Reasons for delivery exceptions Chart
|
|
// --------------------------------------------------------------------
|
|
const deliveryExceptionsChartE1 = document.querySelector('#deliveryExceptionsChart'),
|
|
deliveryExceptionsChartConfig = {
|
|
chart: {
|
|
height: 420,
|
|
parentHeightOffset: 0,
|
|
type: 'donut'
|
|
},
|
|
labels: ['Incorrect address', 'Weather conditions', 'Federal Holidays', 'Damage during transit'],
|
|
series: [13, 25, 22, 40],
|
|
colors: [
|
|
chartColors.donut.series1,
|
|
chartColors.donut.series2,
|
|
chartColors.donut.series3,
|
|
chartColors.donut.series4
|
|
],
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
formatter: function (val, opt) {
|
|
return parseInt(val) + '%';
|
|
}
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 10,
|
|
markers: {
|
|
width: 8,
|
|
height: 8,
|
|
offsetX: -3
|
|
},
|
|
itemMargin: {
|
|
horizontal: 15,
|
|
vertical: 5
|
|
},
|
|
fontSize: '13px',
|
|
fontFamily: 'Public Sans',
|
|
fontWeight: 400,
|
|
labels: {
|
|
colors: headingColor,
|
|
useSeriesColors: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: false
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 15
|
|
}
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '75%',
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
fontSize: '26px',
|
|
fontFamily: 'Public Sans',
|
|
color: headingColor,
|
|
fontWeight: 500,
|
|
offsetY: -30,
|
|
formatter: function (val) {
|
|
return parseInt(val) + '%';
|
|
}
|
|
},
|
|
name: {
|
|
offsetY: 20,
|
|
fontFamily: 'Public Sans'
|
|
},
|
|
total: {
|
|
show: true,
|
|
fontSize: '0.7rem',
|
|
label: 'AVG. Exceptions',
|
|
color: labelColor,
|
|
formatter: function (w) {
|
|
return '30%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 420,
|
|
options: {
|
|
chart: {
|
|
height: 360
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (typeof deliveryExceptionsChartE1 !== undefined && deliveryExceptionsChartE1 !== null) {
|
|
const deliveryExceptionsChart = new ApexCharts(deliveryExceptionsChartE1, deliveryExceptionsChartConfig);
|
|
deliveryExceptionsChart.render();
|
|
}
|
|
})();
|
|
|
|
// DataTable (jquery)
|
|
// --------------------------------------------------------------------
|
|
$(function () {
|
|
// Variable declaration for table
|
|
var dt_dashboard_table = $('.dt-route-vehicles');
|
|
|
|
// On route vehicles DataTable
|
|
if (dt_dashboard_table.length) {
|
|
var dt_dashboard = dt_dashboard_table.DataTable({
|
|
ajax: assetsPath + 'json/logistics-dashboard.json',
|
|
columns: [
|
|
{ data: 'id' },
|
|
{ data: 'id' },
|
|
{ data: 'location' },
|
|
{ data: 'start_city' },
|
|
{ data: 'end_city' },
|
|
{ data: 'warnings' },
|
|
{ data: 'progress' }
|
|
],
|
|
columnDefs: [
|
|
{
|
|
// For Responsive
|
|
className: 'control',
|
|
orderable: false,
|
|
searchable: false,
|
|
responsivePriority: 2,
|
|
targets: 0,
|
|
render: function (data, type, full, meta) {
|
|
return '';
|
|
}
|
|
},
|
|
{
|
|
// For Checkboxes
|
|
targets: 1,
|
|
orderable: false,
|
|
searchable: false,
|
|
checkboxes: true,
|
|
responsivePriority: 3,
|
|
render: function () {
|
|
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
|
},
|
|
checkboxes: {
|
|
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
|
}
|
|
},
|
|
{
|
|
// Icon and location
|
|
targets: 2,
|
|
responsivePriority: 1,
|
|
render: function (data, type, full, meta) {
|
|
var $location = full['location'];
|
|
// Creates full output for row
|
|
var $row_output =
|
|
'<div class="d-flex justify-content-start align-items-center user-name">' +
|
|
'<div class="avatar-wrapper">' +
|
|
'<div class="avatar me-2">' +
|
|
'<span class="avatar-initial rounded-circle bg-label-secondary"><i class="bx bxs-truck"></i></span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="d-flex flex-column">' +
|
|
'<a class="text-body fw-medium" href="app-logistics-fleet.html">VOL-' +
|
|
$location +
|
|
'</a>' +
|
|
'</div>' +
|
|
'</div>';
|
|
return $row_output;
|
|
}
|
|
},
|
|
{
|
|
// starting route
|
|
targets: 3,
|
|
render: function (data, type, full, meta) {
|
|
var $start_city = full['start_city'],
|
|
$start_country = full['start_country'];
|
|
var $row_output = '<div class="text-body">' + $start_city + ', ' + $start_country + '</div >';
|
|
return $row_output;
|
|
}
|
|
},
|
|
{
|
|
// ending route
|
|
targets: 4,
|
|
render: function (data, type, full, meta) {
|
|
var $end_city = full['end_city'],
|
|
$end_country = full['end_country'];
|
|
var $row_output = '<div class="text-body">' + $end_city + ', ' + $end_country + '</div >';
|
|
return $row_output;
|
|
}
|
|
},
|
|
{
|
|
// warnings
|
|
targets: -2,
|
|
render: function (data, type, full, meta) {
|
|
var $status_number = full['warnings'];
|
|
var $status = {
|
|
1: { title: 'No Warnings', class: 'bg-label-success' },
|
|
2: {
|
|
title: 'Temperature Not Optimal',
|
|
class: 'bg-label-warning'
|
|
},
|
|
3: { title: 'Ecu Not Responding', class: 'bg-label-danger' },
|
|
4: { title: 'Oil Leakage', class: 'bg-label-info' },
|
|
5: { title: 'fuel problems', class: 'bg-label-primary' }
|
|
};
|
|
if (typeof $status[$status_number] === 'undefined') {
|
|
return data;
|
|
}
|
|
return (
|
|
'<span class="badge rounded ' +
|
|
$status[$status_number].class +
|
|
'">' +
|
|
$status[$status_number].title +
|
|
'</span>'
|
|
);
|
|
}
|
|
},
|
|
{
|
|
// progress
|
|
targets: -1,
|
|
render: function (data, type, full, meta) {
|
|
var $progress = full['progress'];
|
|
var $progress_output =
|
|
'<div class="d-flex align-items-center">' +
|
|
'<div div class="progress w-100" style="height: 8px;">' +
|
|
'<div class="progress-bar" role="progressbar" style="width:' +
|
|
$progress +
|
|
'%;" aria-valuenow="' +
|
|
$progress +
|
|
'" aria-valuemin="0" aria-valuemax="100"></div>' +
|
|
'</div>' +
|
|
'<div class="text-body ms-3">' +
|
|
$progress +
|
|
'%</div>' +
|
|
'</div>';
|
|
return $progress_output;
|
|
}
|
|
}
|
|
],
|
|
order: [2, 'asc'],
|
|
dom: '<"table-responsive"t><"row d-flex align-items-center"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
|
|
displayLength: 5,
|
|
responsive: {
|
|
details: {
|
|
display: $.fn.dataTable.Responsive.display.modal({
|
|
header: function (row) {
|
|
var data = row.data();
|
|
return 'Details of ' + data['location'];
|
|
}
|
|
}),
|
|
type: 'column',
|
|
renderer: function (api, rowIdx, columns) {
|
|
var data = $.map(columns, function (col, i) {
|
|
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
|
? '<tr data-dt-row="' +
|
|
col.rowIndex +
|
|
'" data-dt-column="' +
|
|
col.columnIndex +
|
|
'">' +
|
|
'<td>' +
|
|
col.title +
|
|
':' +
|
|
'</td> ' +
|
|
'<td>' +
|
|
col.data +
|
|
'</td>' +
|
|
'</tr>'
|
|
: '';
|
|
}).join('');
|
|
|
|
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
$('.dataTables_info').addClass('pt-0');
|
|
}
|
|
});
|