first initial
This commit is contained in:
208
resources/views/dashboard_data.blade.php
Normal file
208
resources/views/dashboard_data.blade.php
Normal file
@@ -0,0 +1,208 @@
|
||||
<!--begin: Datatable -->
|
||||
<style>
|
||||
.table-responsive {
|
||||
height: 60vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-link-tab {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.nav-link-tab.active {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
|
||||
<div>
|
||||
<canvas id="dealer-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
|
||||
<div class="table-responsive" id="table">
|
||||
<table class="table" id="kt_table">
|
||||
<thead>
|
||||
<tr>
|
||||
{{-- <th rowspan="2" style="width: 18%; z-index: 99;">Dealer</th> --}}
|
||||
@if ($theads)
|
||||
<th colspan="{{ count($theads) }}" class="text-center">Pekerjaan</th>
|
||||
@endif
|
||||
<th rowspan="2" style="width: 18%; z-index: 99;">Aksi</th>
|
||||
</tr>
|
||||
@if ($theads)
|
||||
<tr>
|
||||
@foreach ($theads as $thead)
|
||||
<th>{{ $thead }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endif
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($work_trx as $dealer_id => $trx)
|
||||
<tr>
|
||||
{{-- <td>{{ $trx['dealer_name'] }}</td> --}}
|
||||
@foreach ($trx as $item)
|
||||
<td>{{ $item }}</td>
|
||||
@endforeach
|
||||
<td>
|
||||
{{-- <div class="btn btn-danger">ASD</div> --}}
|
||||
<a href="{{ route('dealer_recap', ["id" => $dealer_id, "month" => $month, "year" => $year]) }}" class="btn btn-info btn-sm">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th style="background: #C5CEFF !important;">
|
||||
<p>Total Bulan Ini</p><hr>
|
||||
<p>Total Bulan Kemarin</p>
|
||||
</th>
|
||||
@foreach ($totals as $total)
|
||||
<th style="background: #C5CEFF !important;">
|
||||
<p>{{ $total['now'] }} @if($total['now'] > $total['prev']) <i class="ml-3 fa fa-caret-up text-success"></i> @else <i class="ml-3 fa fa-caret-down text-danger"></i> @endif</p><hr>
|
||||
<p>{{ $total['prev'] }}</p>
|
||||
</th>
|
||||
@endforeach
|
||||
<th style="background: #C5CEFF !important;"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function random_rgba(alpha) {
|
||||
var o = Math.round, r = Math.random, s = 255;
|
||||
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
|
||||
}
|
||||
|
||||
let labels = JSON.parse('{{ $dealer_names }}'.replace(/("\;)/g,"\""));
|
||||
let labels2 = []
|
||||
labels.forEach(function(label) {
|
||||
if (/\s/.test(label)) {
|
||||
labels2.push(label.split(" "))
|
||||
}else{
|
||||
labels2.push(label)
|
||||
}
|
||||
})
|
||||
|
||||
const trx_data = JSON.parse('{{ $dealer_trx }}'.replace(/("\;)/g,"\""));
|
||||
let trxs = []
|
||||
trx_data.forEach(trx => {
|
||||
let data = {
|
||||
label : trx['work_name'],
|
||||
data: trx['qty'],
|
||||
fill: false,
|
||||
backgroundColor: random_rgba(0.2),
|
||||
borderColor: random_rgba(1),
|
||||
borderWidth: 1,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
|
||||
trxs.push(data)
|
||||
});
|
||||
|
||||
const data = {
|
||||
labels: labels2,
|
||||
datasets: trxs
|
||||
};
|
||||
|
||||
if(trxs.length && labels2.length) {
|
||||
new Chart($("#dealer-chart"), {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
plugins: [ChartDataLabels],
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: 'rgb(255, 99, 132)'
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$("#dealer-chart").parent().height($("#dealer-chart").parent().height() + trxs.length * 800)
|
||||
}else{
|
||||
$("#dealer-chart").parent().append(`
|
||||
<div class="alert" role="alert">
|
||||
<div class="alert-text">
|
||||
<h4 class="alert-heading">Data Kosong!</h4>
|
||||
<p>Belum ada data pekerjaan masuk untuk bulan
|
||||
@if($month == '01')
|
||||
januari
|
||||
@elseif($month == '02')
|
||||
februari
|
||||
@elseif($month == '03')
|
||||
maret
|
||||
@elseif($month == '04')
|
||||
april
|
||||
@elseif($month == '05')
|
||||
mei
|
||||
@elseif($month == '06')
|
||||
juni
|
||||
@elseif($month == '07')
|
||||
juli
|
||||
@elseif($month == '08')
|
||||
agustus
|
||||
@elseif($month == '09')
|
||||
september
|
||||
@elseif($month == '10')
|
||||
oktober
|
||||
@elseif($month == '11')
|
||||
november
|
||||
@elseif($month == '12')
|
||||
desember
|
||||
@endif
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
$("#dealer-chart").parent().css('height', '100%')
|
||||
$("#dealer-chart").remove()
|
||||
}
|
||||
|
||||
$(".nav-link-tab.active").removeClass('btn-primary')
|
||||
$(".nav-link-tab.active").removeClass('text-light')
|
||||
$(".nav-link-tab.active i").toggleClass('text-light')
|
||||
$(".nav-link-tab").parent().click(function() {
|
||||
$(".nav-link-tab").toggleClass('btn-primary')
|
||||
$(".nav-link-tab").toggleClass('text-light')
|
||||
$(".nav-link-tab i").toggleClass('text-light')
|
||||
})
|
||||
|
||||
$("#kt_table").DataTable({
|
||||
paging: false,
|
||||
fixedColumns: {
|
||||
left: 1,
|
||||
right: 1
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user