133 lines
4.2 KiB
PHP
Executable File
133 lines
4.2 KiB
PHP
Executable File
<div class="tab-content">
|
|
<div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
|
|
<canvas id="sa-chart" ></canvas>
|
|
</div>
|
|
<div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
|
|
<div class="table-responsive">
|
|
<!--begin: Datatable -->
|
|
<table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="2">No</th>
|
|
<th colspan="{{ count($theads) }}" class="text-center">Pekerjaan</th>
|
|
</tr>
|
|
<tr>
|
|
@foreach ($theads as $thead)
|
|
<th>{{ $thead }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($work_trx as $sa_id => $trx)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
@foreach ($trx as $item)
|
|
<td>{{ $item }}</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<!--end: Datatable -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
|
|
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('{{ $sa_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('{{ $sa_trx }}'.replace(/("\;)/g,"\""));
|
|
let height = trx_data.length * 20;
|
|
let chart_height = 0;
|
|
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,
|
|
skipNull: true
|
|
}
|
|
chart_height += height
|
|
trxs.push(data)
|
|
});
|
|
|
|
const data = {
|
|
labels: labels2,
|
|
datasets: trxs
|
|
};
|
|
|
|
if(labels2.length && trxs.length) {
|
|
new Chart($("#sa-chart"), {
|
|
type: 'bar',
|
|
data: data,
|
|
plugins: [ChartDataLabels],
|
|
options: {
|
|
indexAxis: 'y',
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
position: 'top',
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
color: 'rgb(255, 99, 132)'
|
|
},
|
|
position: 'top'
|
|
}
|
|
},
|
|
}
|
|
});
|
|
$("#sa-chart").parent().height($("#sa-chart").parent().height() + chart_height)
|
|
}else{
|
|
$("#sa-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</p>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
`)
|
|
$("#sa-chart").parent().css('height', '100%')
|
|
$("#sa-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();
|
|
</script> |