412 lines
21 KiB
PHP
412 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
@include('layout.header')
|
|
<style>
|
|
.content-wrapper .card {
|
|
border: 0px !important;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row" id="x" style="display: none;">
|
|
<div class="col-12">
|
|
<span class="d-flex align-items-center purchase-popup">
|
|
<i class="typcn typcn-delete-outline" id="bannerClose"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="container-scroller">
|
|
@include('layout.navbar')
|
|
<!-- partial -->
|
|
@include('layout.breadscrum')
|
|
<div class="container-fluid page-body-wrapper">
|
|
|
|
@include('layout.sidebar')
|
|
|
|
<!-- partial -->
|
|
<div class="main-panel">
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-xl-12 mb-0 grid-margin stretch-card flex-column">
|
|
<div class="row">
|
|
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card " style="border-left: 5px solid #33db40 !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.today_sample') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold">{{$todaySamples}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-flask fa-2x text-gray"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #5881dd !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.this_month_sample') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold">{{$thisMonthSamples}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-flask fa-2x text-gray"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #f39915 !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.last_month_sample') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold">{{$previousMonthSamples}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-flask fa-2x text-gray"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #555 !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.average_sample') }} <span class="small">({{date('Y',strtotime("-1 year"))}})</span></div>
|
|
<div class="h5 mb-0 font-weight-bold ">{{$averageSamples}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-flask fa-2x text-gray"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row h-100">
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #5881dd !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.today_income') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($todayIncome / 100) * 100) : number_format($todayIncome,2)}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-2x text-gray">
|
|
{{$labSettings->currency==1 ? '៛' : '$'}}
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #33db40 !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.this_month_income') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($thisMonthIncome / 100) * 100) : number_format($thisMonthIncome,2)}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-2x text-gray">
|
|
{{$labSettings->currency==1 ? '៛' : '$'}}
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #dc3545 !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1"> {{ __('general.last_month_income') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($lastMonthIncome / 100) * 100) : number_format($lastMonthIncome,2)}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-2x text-gray">
|
|
{{$labSettings->currency==1 ? '៛' : '$'}}
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 grid-margin stretch-card">
|
|
<div class="card" style="border-left: 5px solid #f39915 !important;" >
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-uppercase mb-1">{{ __('general.last_year_income') }}</div>
|
|
<div class="h5 mb-0 font-weight-bold ">{{$labSettings->currency==1 ? number_format(ceil($lastYearIncome / 100) * 100) : number_format($lastYearIncome,2)}}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-2x text-gray">
|
|
{{$labSettings->currency==1 ? '៛' : '$'}}
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-6 grid-margin stretch-card">
|
|
<div class="card bg-inverse-light">
|
|
<div class="card-body border-bottom">
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
|
<h6 class="mb-2 mb-md-0 text-uppercase font-weight-medium">{{ __('general.sample_statistic') }}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="sales-chart-d" height="150"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-xl-6 grid-margin stretch-card">
|
|
<div class="card bg-inverse-light">
|
|
<div class="card-body border-bottom">
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
|
<div class="dropdown">
|
|
<button class="btn bg-white p-0 pb-1 text-muted btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Bar Chart
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton4">
|
|
<a class="dropdown-item" href="javascript:;">Bar Chart</a>
|
|
<a class="dropdown-item" href="javascript:;">Pie Chart</a>
|
|
</div>
|
|
</div>
|
|
<h6 class="mb-2 mb-md-0 text-uppercase font-weight-medium">{{ __('general.sample_source_statistic') }}</h6>
|
|
<div class="dropdown">
|
|
<button class="btn bg-white p-0 pb-1 text-muted btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{__('general.chart_filter_this_month')}}
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton4">
|
|
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_today')}}</a>
|
|
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_this_month')}}</a>
|
|
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_this_year')}}</a>
|
|
<a class="dropdown-item" href="javascript:;">{{__('general.chart_filter_last_year')}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="sales-chart-b" height="150"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@include('layout.footer')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@include('layout.common_script')
|
|
|
|
<script src="{{url(env("APP_URL").'storage/assets/libs/chart.js/Chart.min.js')}}"></script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
// Set interval to reload the page every 2 minutes (120000 milliseconds)
|
|
setInterval(function () {
|
|
location.reload();
|
|
}, 120000);
|
|
});
|
|
|
|
function generateColorCodeByYear(year) {
|
|
const seed = parseInt(year.toString().slice(-2));
|
|
const red = (Math.sin(seed * 1) * 127 + 128) | 0;
|
|
const green = (Math.sin(seed * 2) * 127 + 128) | 0;
|
|
const blue = (Math.sin(seed * 3) * 127 + 128) | 0;
|
|
|
|
return `#${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
|
|
}
|
|
</script>
|
|
<script>
|
|
|
|
let sampleSourceData = <?php echo json_encode($sampleSourceChart);?>;
|
|
let sampleYearData = Object.values(<?php echo json_encode($sampleYear);?>);
|
|
|
|
let preparedSampleChartData = [];
|
|
let maxYear = Math.ceil((parseInt("<?php echo $maxYear?>"))/50) * 50;
|
|
let maxSampleSource = Math.ceil((parseInt("<?php echo $maxSampleSource?>"))/20) * 20;
|
|
|
|
let arrLabel = [];
|
|
sampleYearData.map(item=>{
|
|
|
|
let years = Object.values(item.year);
|
|
let singleSampleChart = {
|
|
label : years[0],
|
|
data : Object.values(item.data),
|
|
backgroundColor: generateColorCodeByYear(years[0])
|
|
};
|
|
arrLabel = Object.values(item.month);
|
|
preparedSampleChartData.push(singleSampleChart);
|
|
});
|
|
|
|
(function($) {
|
|
'use strict';
|
|
$(function() {
|
|
// sales-chart-d start
|
|
if ($("#sales-chart-d").length) {
|
|
var SalesChartDCanvas = $("#sales-chart-d").get(0).getContext("2d");
|
|
var SalesChartD = new Chart(SalesChartDCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: arrLabel,
|
|
datasets: preparedSampleChartData
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: true,
|
|
gridLines: {
|
|
display: true,
|
|
drawBorder: true
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
min: 0,
|
|
max: maxYear,
|
|
stepSize: 50,
|
|
fontSize: 10,
|
|
fontColor: "#001737",
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
stacked: false,
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: "#001737",
|
|
fontSize: 10
|
|
},
|
|
gridLines: {
|
|
color: "rgba(0, 0, 0, 0)",
|
|
display: true
|
|
},
|
|
barPercentage: .3
|
|
}]
|
|
},
|
|
legend: {
|
|
display: true
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
},
|
|
});
|
|
}
|
|
// sales-chart-d end
|
|
|
|
if ($("#sales-chart-b").length) {
|
|
var SalesChartDCanvas = $("#sales-chart-b").get(0).getContext("2d");
|
|
var SalesChartD = new Chart(SalesChartDCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: sampleSourceData.sample_source,
|
|
datasets: [
|
|
{
|
|
label: sampleSourceData.period_type[0]+' Samples',
|
|
data: sampleSourceData.total_samples,
|
|
backgroundColor: '#3b86d1'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: true,
|
|
gridLines: {
|
|
display: true,
|
|
drawBorder: true
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
min: 0,
|
|
max: maxSampleSource,
|
|
stepSize: 20,
|
|
fontSize: 10,
|
|
fontColor: "#001737",
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
stacked: false,
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: "#001737",
|
|
fontSize: 10
|
|
},
|
|
gridLines: {
|
|
color: "rgba(0, 0, 0, 0)",
|
|
display: false
|
|
},
|
|
barPercentage: .3
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
},
|
|
});
|
|
}
|
|
});
|
|
})(jQuery);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|