You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
617 lines
22 KiB
617 lines
22 KiB
<style> |
|
#wpBayar { |
|
min-width: 600px; |
|
max-width: auto; |
|
height: 600px; |
|
margin: 0 auto; |
|
} |
|
</style> |
|
<?php |
|
|
|
ini_set('memory_limit', '4096M'); |
|
|
|
echo 'Initial memory usage: ' . memory_get_usage() . ' bytes' . PHP_EOL; |
|
|
|
$tahun2 = date('Y'); |
|
$rentang_tahun = range($tahun2, 2022); |
|
|
|
$totalWPBYR = 0; |
|
$totalWPBYRTERATUR = 0; |
|
$totalJMLWP = 0; |
|
|
|
foreach ($raporbyr as $row) { |
|
$totalWPBYR += $row->WPBYR; |
|
$totalWPBYRTERATUR += $row->WPBYRTERATUR; |
|
$totalJMLWP += $row->JMLWP; |
|
} |
|
|
|
$nasionalX = ($totalWPBYR / ($totalJMLWP ?: 1)) * 100; |
|
$nasionalY = ($totalWPBYRTERATUR / ($totalWPBYR ?: 1)) * 100; |
|
|
|
$area1Count = 0; // Top right |
|
$area2Count = 0; // Top left |
|
$area3Count = 0; // Bottom right |
|
$area4Count = 0; // Bottom left |
|
|
|
foreach ($raporbyr as $row) { |
|
$x = ($row->WPBYR / ($row->JMLWP ?: 1)) * 100; |
|
$y = ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100; |
|
|
|
if ($x > $nasionalX && $y > $nasionalY) { |
|
$area1Count++; |
|
} elseif ($x <= $nasionalX && $y > $nasionalY) { |
|
$area2Count++; |
|
} elseif ($x > $nasionalX && $y <= $nasionalY) { |
|
$area3Count++; |
|
} else { |
|
$area4Count++; |
|
} |
|
} |
|
|
|
$dataraporkwl = "["; |
|
|
|
$dataraporkwl .= "{x: " . $nasionalX . ", y: " . $nasionalY . ", z: 2, name: 'Nasional', color: '#000000', jmlwp: " . $totalJMLWP . ", wpbyr: " . $totalWPBYR . ", wpbyrteratur: " . $totalWPBYRTERATUR . "},"; |
|
|
|
foreach ($raporbyr as $row) { |
|
$x = (($row->WPBYR / $row->JMLWP ?: 1)) * 100; |
|
$y = (($row->WPBYRTERATUR / $row->WPBYR ?: 1)) * 100; |
|
$dd = $row->KWLADM; |
|
$dataraporkwl .= "{x: " . $x . ", y: " . $y . ", z: 1, name: '" . addslashes($row->NAMA) . "', drilldown: \"" . $dd . "\", jmlwp: " . $row->JMLWP . ", wpbyr: " . $row->WPBYR . ", wpbyrteratur: " . $row->WPBYRTERATUR . "},"; |
|
} |
|
|
|
$dataraporkwl = rtrim($dataraporkwl, ',') . "]"; |
|
|
|
$nasionalX = ($totalWPBYR / ($totalJMLWP ?: 1)) * 100; |
|
$nasionalY = ($totalWPBYRTERATUR / ($totalWPBYR ?: 1)) * 100; |
|
|
|
$drilldownSeries = []; |
|
|
|
// per KPP |
|
foreach ($drilldownData['kpp'] as $kwladm => $kpps) { |
|
$parentPoint = null; |
|
$data = []; |
|
|
|
foreach ($raporbyr as $row) { |
|
if ($row->KWLADM == $kwladm) { |
|
$parentPoint = [ |
|
'name' => $row->NAMA, |
|
'x' => ($row->WPBYR / ($row->JMLWP ?: 1)) * 100, |
|
'y' => ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100, |
|
'color' => '#FF0000', |
|
'dataLabels' => [ |
|
'enabled' => true, |
|
'format' => '{point.name}', |
|
'style' => ['fontWeight' => 'bold'] |
|
], |
|
'jmlwp' => $row->JMLWP, |
|
'wpbyr' => $row->WPBYR, |
|
'wpbyrteratur' => $row->WPBYRTERATUR |
|
]; |
|
break; |
|
} |
|
} |
|
|
|
if ($parentPoint) { |
|
$data[] = $parentPoint; |
|
} |
|
|
|
foreach ($kpps as $kpp) { |
|
$data[] = [ |
|
'name' => $kpp['name'], |
|
'x' => $kpp['x'], |
|
'y' => $kpp['y'], |
|
'z' => $kpp['z'], |
|
'drilldown' => (string)$kpp['drilldown'], |
|
'jmlwp' => $kpp['jmlwp'], |
|
'wpbyr' => $kpp['wpbyr'], |
|
'wpbyrteratur' => $kpp['wpbyrteratur'] |
|
]; |
|
} |
|
|
|
$drilldownSeries[] = [ |
|
'id' => (string)$kwladm, |
|
'name' => "KPP in " . $kwladm, |
|
'data' => $data |
|
]; |
|
} |
|
|
|
// per Seksi |
|
foreach ($drilldownData['sie'] as $kppadm => $sies) { |
|
$parentPoint = null; |
|
$data = []; |
|
|
|
foreach ($raporbyrkpp as $row) { |
|
if ($row->KPPADM == $kppadm) { |
|
$parentPoint = [ |
|
'name' => $row->NAMA, |
|
'x' => ($row->WPBYR / ($row->JMLWP ?: 1)) * 100, |
|
'y' => ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100, |
|
'color' => '#00FF00', |
|
'dataLabels' => [ |
|
'enabled' => true, |
|
'format' => '{point.name}', |
|
'style' => ['fontWeight' => 'bold'] |
|
], |
|
'jmlwp' => $row->JMLWP, |
|
'wpbyr' => $row->WPBYR, |
|
'wpbyrteratur' => $row->WPBYRTERATUR |
|
]; |
|
break; |
|
} |
|
} |
|
|
|
if ($parentPoint) { |
|
$data[] = $parentPoint; |
|
} |
|
|
|
foreach ($sies as $sie) { |
|
$data[] = [ |
|
'name' => $sie['name'], |
|
'x' => $sie['x'], |
|
'y' => $sie['y'], |
|
'z' => $sie['z'], |
|
'drilldown' => (string)($kppadm . '_' . $sie['drilldown']), |
|
'jmlwp' => $sie['jmlwp'], |
|
'wpbyr' => $sie['wpbyr'], |
|
'wpbyrteratur' => $sie['wpbyrteratur'] |
|
]; |
|
} |
|
|
|
$drilldownSeries[] = [ |
|
'id' => (string)$kppadm, |
|
'name' => "SIE in " . $kppadm, |
|
'data' => $data |
|
]; |
|
} |
|
|
|
// per Pegawai |
|
foreach ($drilldownData['peg'] as $key => $pegs) { |
|
$parentPoint = null; |
|
$data = []; |
|
|
|
list($kppadm, $kodesie) = explode('_', $key); |
|
foreach ($raporbyrsie as $row) { |
|
if ($row->KPPADM == $kppadm && $row->KODESIE == $kodesie) { |
|
$parentPoint = [ |
|
'name' => $row->NAMA, |
|
'x' => ($row->WPBYR / ($row->JMLWP ?: 1)) * 100, |
|
'y' => ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100, |
|
'color' => '#0000FF', |
|
'dataLabels' => [ |
|
'enabled' => true, |
|
'format' => '{point.name}', |
|
'style' => ['fontWeight' => 'bold'] |
|
], |
|
'jmlwp' => $row->JMLWP, |
|
'wpbyr' => $row->WPBYR, |
|
'wpbyrteratur' => $row->WPBYRTERATUR |
|
]; |
|
break; |
|
} |
|
} |
|
|
|
if ($parentPoint) { |
|
$data[] = $parentPoint; |
|
} |
|
|
|
foreach ($pegs as $peg) { |
|
$data[] = [ |
|
'name' => $peg['name'], |
|
'x' => $peg['x'], |
|
'y' => $peg['y'], |
|
'z' => $peg['z'], |
|
'drilldown' => null, |
|
'jmlwp' => $peg['jmlwp'], |
|
'wpbyr' => $peg['wpbyr'], |
|
'wpbyrteratur' => $peg['wpbyrteratur'] |
|
]; |
|
} |
|
|
|
$drilldownSeries[] = [ |
|
'id' => (string)$key, |
|
'name' => "PEG in " . $key, |
|
'data' => $data |
|
]; |
|
} |
|
|
|
$d['drilldownSeries'] = $drilldownSeries; |
|
?> |
|
<div class="main-content"> |
|
<div class="container-fluid"> |
|
<div class="row"> |
|
<div class="col-sm-12 mb-2"> |
|
<form class="form-inline" action="<?php base_url('rapor/wpbyr') ?>" method="post"> |
|
<label class="my-1 mr-2">Tahun :</label> |
|
<select class="custom-select my-1 mr-sm-2" id="tahun" name="tahun"> |
|
<?php |
|
foreach ($rentang_tahun as $tahun) { |
|
if ($tahun == $tahunx) { |
|
$sel = "selected"; |
|
} else { |
|
$sel = ""; |
|
} |
|
echo "<option value=\"" . $tahun . "\" " . $sel . ">" . $tahun . "</option>"; |
|
} |
|
?> |
|
</select> |
|
<label class="my-1 mr-2">s.d. Bulan :</label> |
|
<select class="custom-select my-1 mr-sm-2" id="bulan" name="bulan"> |
|
<?php |
|
foreach ($refbulan as $rowb) { |
|
if ($rowb->KODE == $bulanx) { |
|
$isSelected = ' selected="selected"'; |
|
} else { |
|
$isSelected = ''; |
|
} |
|
echo "<option value='" . $rowb->KODE . "'" . $isSelected . ">" . ucfirst(strtolower($rowb->NM_PANJANG)) . "</option>"; |
|
} |
|
?> |
|
</select> |
|
|
|
<button type="submit" class="btn btn-primary my-1">Proses</button> |
|
</form> |
|
</div> |
|
</div> |
|
<div class="row clearfix"> |
|
<div class="col-md-12"> |
|
<div class="card"> |
|
<div class="card-header"> |
|
<h3 class="text-center">WP Bayar dan WP Bayar Teratur</h3> |
|
<div class="card-header-right"> |
|
<ul class="list-unstyled card-option"> |
|
<li><i class="ik ik-chevron-left action-toggle"></i></li> |
|
<li><i class="ik ik-minus minimize-card"></i></li> |
|
<li><i class="ik ik-x close-card"></i></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="card-body"> |
|
<div id="wpBayar" style="height:600px"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row clearfix"> |
|
<div class="col-md-12"> |
|
<div class="card"> |
|
<div class="card-header"> |
|
<h3 class="text-center">Data</h3> |
|
<div class="card-header-right"> |
|
<ul class="list-unstyled card-option"> |
|
<li><i class="ik ik-chevron-left action-toggle"></i></li> |
|
<li><i class="ik ik-minus minimize-card"></i></li> |
|
<li><i class="ik ik-x close-card"></i></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="card-body"> |
|
<table class="table table-hover table-striped table-bordered tablesorter" id="wpBayarTable"> |
|
<thead class='thead-dark'> |
|
<tr class="table-active"> |
|
<th class="text-center">No</th> |
|
<th class="text-center">Unit</th> |
|
<th class="text-center">%WP Bayar</th> |
|
<th class="text-center">%WP Bayar Teratur</th> |
|
<th class="text-center">Jumlah WP</th> |
|
<th class="text-center">WP Bayar <?= $tahunx ?></th> |
|
<th class="text-center">WP Bayar Teratur <?= $tahunx ?></th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<?php |
|
$no = 1; |
|
$totalJmlWP = 0; |
|
$totalWPBayar = 0; |
|
$totalWPBayarTeratur = 0; |
|
foreach ($raporbyr as $row) { |
|
$wpBayarPercentage = ($row->WPBYR / ($row->JMLWP ?: 1)) * 100; |
|
$wpBayarTeraturPercentage = ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100; |
|
$totalJmlWP += $row->JMLWP; |
|
$totalWPBayar += $row->WPBYR; |
|
$totalWPBayarTeratur += $row->WPBYRTERATUR; |
|
?> |
|
<tr> |
|
<td><?= $no++ ?></td> |
|
<td><?= $row->KWLADM ?>-<?= $row->NM_PANJANG ?></td> |
|
<td class="text-right"><?= number_format($wpBayarPercentage, 2) ?>%</td> |
|
<td class="text-right"><?= number_format($wpBayarTeraturPercentage, 2) ?>%</td> |
|
<td class="text-right"><?= number_format($row->JMLWP, 0, ',', '.') ?></td> |
|
<td class="text-right"><?= number_format($row->WPBYR, 0, ',', '.') ?></td> |
|
<td class="text-right"><?= number_format($row->WPBYRTERATUR, 0, ',', '.') ?></td> |
|
</tr> |
|
<?php } ?> |
|
</tbody> |
|
<tfoot class='thead-dark'> |
|
<tr> |
|
<th colspan="2" class="text-center">Total</th> |
|
<th class="text-right"><?= number_format(($totalWPBayar / ($totalJmlWP ?: 1)) * 100, 2) ?> |
|
% |
|
</th> |
|
<th class="text-right"><?= number_format(($totalWPBayarTeratur / ($totalWPBayar ?: 1)) * 100, 2) ?> |
|
% |
|
</th> |
|
<th class="text-right"><?= number_format($totalJmlWP, 0, ',', '.') ?></th> |
|
<th class="text-right"><?= number_format($totalWPBayar, 0, ',', '.') ?></th> |
|
<th class="text-right"><?= number_format($totalWPBayarTeratur, 0, ',', '.') ?></th> |
|
</tr> |
|
</tfoot> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<?php echo view('inc/js.php') ?> |
|
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> |
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"> |
|
<script> |
|
function addAreaLabels(chart) { |
|
var renderer = chart.renderer; |
|
var plotLeft = chart.plotLeft; |
|
var plotTop = chart.plotTop; |
|
var plotWidth = chart.plotWidth; |
|
var plotHeight = chart.plotHeight; |
|
|
|
// Remove existing labels if any |
|
if (chart.areaLabels) { |
|
chart.areaLabels.forEach(function (label) { |
|
label.destroy(); |
|
}); |
|
} |
|
chart.areaLabels = []; |
|
|
|
// Create and add new labels |
|
var labelStyle = { |
|
color: '#FFFFFF', // White text for better contrast |
|
fontWeight: 'bold', |
|
fontSize: '12px', |
|
padding: 5, |
|
borderRadius: 5 |
|
}; |
|
|
|
var labels = [ |
|
{ |
|
text: 'Kuadran 1<br><?php echo $area1Count; ?> Kanwil', |
|
x: plotLeft + plotWidth - 10, |
|
y: plotTop + 10, |
|
align: 'right', |
|
verticalAlign: 'top', |
|
color: 'rgba(0, 128, 0, 0.7)' // Green with 70% opacity |
|
}, |
|
{ |
|
text: 'Kuadran 2<br><?php echo $area2Count; ?> Kanwil', |
|
x: plotLeft - 65, |
|
y: plotTop + 10, |
|
align: 'left', |
|
verticalAlign: 'top', |
|
color: 'rgba(255, 165, 0, 0.7)' // Orange with 70% opacity |
|
}, |
|
{ |
|
text: 'Kuadran 3<br><?php echo $area3Count; ?> Kanwil', |
|
x: plotLeft + plotWidth - 10, |
|
y: plotTop + plotHeight - 40, |
|
align: 'right', |
|
verticalAlign: 'bottom', |
|
color: 'rgba(255, 165, 0, 0.7)' // Orange with 70% opacity |
|
}, |
|
{ |
|
text: 'Kuadran 4<br><?php echo $area4Count; ?> Kanwil', |
|
x: plotLeft - 65, |
|
y: plotTop + plotHeight - 40, |
|
align: 'left', |
|
verticalAlign: 'bottom', |
|
color: 'rgba(255, 0, 0, 0.7)' // Red with 70% opacity |
|
} |
|
]; |
|
|
|
labels.forEach(function (labelConfig) { |
|
var label = renderer.label(labelConfig.text, labelConfig.x, labelConfig.y) |
|
.css(labelStyle) |
|
.attr({ |
|
align: labelConfig.align, |
|
zIndex: 6, |
|
padding: 5, |
|
r: 5, // Border radius |
|
fill: labelConfig.color, |
|
stroke: '#000000', |
|
'stroke-width': 1 |
|
}) |
|
.add(); |
|
|
|
chart.areaLabels.push(label); |
|
}); |
|
} |
|
|
|
Highcharts.chart('wpBayar', { |
|
chart: { |
|
type: 'scatter', |
|
plotBorderWidth: 1, |
|
zoomType: 'xy', |
|
panning: true, |
|
panKey: 'shift', |
|
events: { |
|
load: function () { |
|
addAreaLabels(this); |
|
}, |
|
redraw: function () { |
|
addAreaLabels(this); |
|
} |
|
} |
|
}, |
|
legend: { |
|
enabled: false |
|
}, |
|
title: { |
|
text: '' |
|
}, |
|
credits: { |
|
enabled: false |
|
}, |
|
accessibility: { |
|
point: { |
|
valueDescriptionFormat: '{index}. {point.name}, WPbayar: {point.x}%, WPBayarT: {point.y}%, index: {point.z}%.' |
|
} |
|
}, |
|
xAxis: { |
|
gridLineWidth: 1, |
|
type: 'logarithmic', |
|
title: { |
|
text: 'WP Bayar' |
|
}, |
|
labels: { |
|
format: '{value:.2f}%' |
|
}, |
|
accessibility: { |
|
rangeDescription: 'Range: 0 to 100 %.' |
|
}, |
|
plotLines: [{ |
|
color: 'red', |
|
dashStyle: 'dash', |
|
value: <?php echo $nasionalX; ?>, |
|
width: 2, |
|
zIndex: 3, |
|
label: { |
|
text: 'WP Bayar - Nasional', |
|
align: 'left', |
|
style: { |
|
color: 'gray' |
|
} |
|
} |
|
}], |
|
crosshair: { |
|
snap: false |
|
} |
|
}, |
|
yAxis: { |
|
startOnTick: false, |
|
endOnTick: false, |
|
type: 'logarithmic', |
|
title: { |
|
text: 'WP Bayar Teratur' |
|
}, |
|
labels: { |
|
format: '{value:.2f}%' |
|
}, |
|
maxPadding: 0.2, |
|
accessibility: { |
|
rangeDescription: 'Range: 0 to 100 persen.' |
|
}, |
|
plotLines: [{ |
|
color: 'red', |
|
dashStyle: 'dash', |
|
value: <?php echo $nasionalY; ?>, // Y-value of the Nasional point |
|
width: 2, |
|
zIndex: 3, |
|
label: { |
|
text: 'WP Bayar Teratur - Nasional', |
|
align: 'right', |
|
style: { |
|
color: 'gray' |
|
} |
|
} |
|
}], |
|
crosshair: { |
|
snap: false |
|
} |
|
}, |
|
tooltip: { |
|
useHTML: true, |
|
headerFormat: '<table style="width:100%; text-align:justify;">', |
|
pointFormatter: function () { |
|
return '<tr><th colspan="2" style="text-align:center; font-size: 20px; padding-bottom: 5px;">' + this.name + '</th></tr>' + |
|
'<tr><td style="font-size: 14px; padding-right: 10px;">%WP Bayar:</td><td style="font-size: 14px; text-align: right;">' + Highcharts.numberFormat(this.x, 2) + '%</td></tr>' + |
|
'<tr><td style="font-size: 14px; padding-right: 10px;">%WP Bayar Teratur:</td><td style="font-size: 14px; text-align: right;">' + Highcharts.numberFormat(this.y, 2) + '%</td></tr>' + |
|
'<tr><td style="font-size: 14px; padding-right: 10px;">Jumlah WP:</td><td style="font-size: 14px; text-align: right;">' + Highcharts.numberFormat(this.jmlwp, 0, '.', ',') + '</td></tr>' + |
|
'<tr><td style="font-size: 14px; padding-right: 10px;">WP Bayar:</td><td style="font-size: 14px; text-align: right;">' + Highcharts.numberFormat(this.wpbyr, 0, '.', ',') + '</td></tr>' + |
|
'<tr><td style="font-size: 14px; padding-right: 10px;">WP Bayar Teratur:</td><td style="font-size: 14px; text-align: right;">' + Highcharts.numberFormat(this.wpbyrteratur, 0, '.', ',') + '</td></tr>'; |
|
}, |
|
footerFormat: '</table>', |
|
followPointer: true, |
|
style: { |
|
fontSize: '14px' |
|
}, |
|
backgroundColor: 'rgba(255, 255, 255, 0.9)', |
|
borderWidth: 1, |
|
borderColor: '#AAA', |
|
borderRadius: 5, |
|
padding: 10 |
|
}, |
|
plotOptions: { |
|
series: { |
|
dataLabels: { |
|
enabled: true, |
|
format: '{point.name}', |
|
allowOverlap: true |
|
} |
|
} |
|
}, |
|
series: [{ |
|
data: <?php echo $dataraporkwl; ?>, |
|
colorByPoint: true, |
|
point: { |
|
events: { |
|
click: function () { |
|
if (this.name === 'Nasional') { |
|
return false; |
|
} |
|
} |
|
} |
|
} |
|
}], |
|
drilldown: { |
|
activeDataLabelStyle: { |
|
color: '#FFFFFF', |
|
textDecoration: 'none', |
|
textOutline: '1px #000000' |
|
}, |
|
breadcrumbs: { |
|
position: { |
|
align: 'right' |
|
}, |
|
}, |
|
series: <?php echo json_encode($drilldownSeries); ?>, |
|
drillUpButton: { |
|
position: { |
|
align: 'right', |
|
y: -10 |
|
} |
|
} |
|
}, |
|
}); |
|
|
|
console.log('Main series data:', <?php echo $dataraporkwl; ?>); |
|
console.log('Drilldown series:', <?php echo json_encode($drilldownSeries, JSON_NUMERIC_CHECK | JSON_PRETTY_PRINT); ?>); |
|
|
|
$(document).ready(function () { |
|
$.fn.dataTable.ext.type.order['formatted-num-pre'] = function (data) { |
|
var x = data.replace(/[\.%,]/g, ''); |
|
return parseFloat(x); |
|
}; |
|
|
|
$('#wpBayarTable').DataTable({ |
|
"order": [[2, "desc"]], |
|
"columnDefs": [ |
|
{ |
|
"type": "formatted-num", |
|
"targets": [2, 3, 4, 5, 6], |
|
"render": function (data, type, row) { |
|
if (type === 'sort') { |
|
return data.replace(/[\.%,]/g, ''); |
|
} |
|
return data; |
|
} |
|
} |
|
], |
|
"language": { |
|
"decimal": ",", |
|
"thousands": "." |
|
}, |
|
"lengthChange": false, |
|
"pageLength": -1, |
|
"searching": false, |
|
"info": false |
|
}); |
|
}); |
|
</script>
|