BartekGit/magico.prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

INIT

Browse Source
This commit is contained in:
Bartek
2026-02-13 14:19:15 +01:00
commit c0beb640e6
1591 changed files with 308373 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

495
assets/js/app-logistics-dashboard.js Normal file
View File

@@ -0,0 +1,495 @@
/**
* 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');
}
});