adding dashboard

app/Config/Boot/development.php

@@ -9,7 +9,7 @@
  |
  | If you set 'display_errors' to '1', CI4's detailed error report will show.
  */
-ini_set('display_errors', '0');
+ini_set('display_errors', '1');
 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED & ~E_STRICT & ~E_USER_NOTICE & ~E_USER_DEPRECATED);
 
 /*
@@ -20,4 +20,4 @@ error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED & ~E_STRICT & ~E_USER_NOTICE &
  | the system. It's not widely used currently, and may not survive
  | release of the framework.
  */
-defined('CI_DEBUG') || define('CI_DEBUG', false);
+defined('CI_DEBUG') || define('CI_DEBUG', true);

app/Controllers/Home.php

@@ -3,11 +3,16 @@
 namespace App\Controllers;
 
 use App\Models\Mpemby;
+use CodeIgniter\HTTP\RequestInterface;
+use CodeIgniter\HTTP\ResponseInterface;
 
 class Home extends BaseController
 {
+
+
 	public function index()
 	{
+
 		if (session('isLogin')) {
 
 			$model = new Mpemby();
@@ -24,6 +29,10 @@ class Home extends BaseController
 			$p['updatex'] = $model->getUpd()->getFirstRow('array');
 			$p['perkategori'] = $model->getKat($param)->getResult();
 			$p['pie_penerimaan'] = $model->getPiePen($param)->getResult();
+			$p['paycomp'] = $model->paycompNas($param)->getResult();
+			$p['parsesof'] = $model->sofNas($param)->getResult();
+
+
 
 
 			echo view('inc/head');

app/Models/Mpemby.php

@@ -55,13 +55,34 @@ class Mpemby extends Model
         $tahunl = $tahun - 1;
         $bln = date('m');
         $query = $this->db->query("SELECT NM_PAJAK,TOTALN PENERIMAAN,
-                                    (SELECT ROUND(SUM(TOTAL)) FROM PERJENIS_MV)  PENERIMAAN_TOT
+                                    (SELECT ROUND(SUM(TOTAL)) FROM PERJENIS_MV WHERE THNBYR = '" . $tahun . "')  PENERIMAAN_TOT
                                     FROM (
                                     SELECT NM_PAJAK,ROUND(SUM(CASE WHEN THNBYR= '" . $tahun . "' THEN TOTAL ELSE 0 END)) TOTALN,
                                     ROUND(SUM(CASE WHEN THNBYR= '" . $tahunl . "' THEN TOTAL ELSE 0 END)) TOTALP
-                                    FROM PERJENIS_MV
+                                    FROM PERJENIS_MV 
-                                    GROUP BY NM_PAJAK ORDER BY TOTALN DESC)
+                                    GROUP BY NM_PAJAK ORDER BY TOTALN DESC) WHERE ROWNUM < = 10
                                     ");
         return $query;
     }
+
+
+    function paycompNas($param)
+    {
+        $tahun = $param['tahun'];
+        $tahunl = $tahun - 1;
+        $query = $this->db->query("SELECT A.JMLBULAN, A.JUMLAHWP,B.JUMLAHWP JUMLAHWPP FROM
+                                (SELECT TO_NUMBER(BLNBYR) JMLBULAN,JUMLAHWP FROM PAYCOMPNAS
+                                WHERE THNBYR = '" . $tahun . "') A,
+                                (SELECT TO_NUMBER(BLNBYR) JMLBULAN,JUMLAHWP FROM PAYCOMPNAS
+                                WHERE THNBYR = '" . $tahunl . "') B
+                                WHERE A.JMLBULAN =B.JMLBULAN");
+        return $query;
+    }
+
+    function sofNas($param)
+    {
+        $tahun = $param['tahun'];
+        $query = $this->db->query("SELECT LAPISAN,TO_NUMBER(WPBYR) WPBYR,ROUND(TOTAL) TOTAL FROM SOFNAS WHERE THNBYR = '" . $tahun . "'");
+        return $query;
+    }
 }

app/Views/inc/js.php

@@ -13,6 +13,9 @@
 <script src="<?= base_url('public/theme/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') ?>"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.3.0/highcharts.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.3.0/highcharts-more.min.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/export-data.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 <script src="<?= base_url('public/theme/js/tables.js') ?>"></script>
 <script src="<?= base_url('public/theme/js/widgets.js') ?>"></script>
 <script src="<?= base_url('public/theme/dist/js/theme.min.js') ?>"></script>

app/Views/inc/sidebar.php

@@ -19,7 +19,7 @@
                         <a href="index.html"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
                     </div>
                     <div class="nav-item">
-                        <a href="pages/navbar.html"><i class="ik ik-menu"></i><span>Navigation</span> <span class="badge badge-success">New</span></a>
+                        <a href="pages/navbar.html"><i class="ik ik-menu"></i><span>Grafik Map KJS</span> <span class="badge badge-success">New</span></a>
                     </div>
                     <div class="nav-item has-sub">
                         <a href="javascript:void(0)"><i class="ik ik-layers"></i><span>Widgets</span> <span class="badge badge-danger">150+</span></a>

app/Views/ppm/dashboard.php

@@ -1,3 +1,48 @@
+<style>
+    .highcharts-figure,
+    .highcharts-data-table table {
+        min-width: 320px;
+        max-width: 800px;
+        margin: 1em auto;
+    }
+
+    .highcharts-data-table table {
+        font-family: Verdana, sans-serif;
+        border-collapse: collapse;
+        border: 1px solid #ebebeb;
+        margin: 10px auto;
+        text-align: center;
+        width: 100%;
+        max-width: 500px;
+    }
+
+    .highcharts-data-table caption {
+        padding: 1em 0;
+        font-size: 1.2em;
+        color: #555;
+    }
+
+    .highcharts-data-table th {
+        font-weight: 600;
+        padding: 0.5em;
+    }
+
+    .highcharts-data-table td,
+    .highcharts-data-table th,
+    .highcharts-data-table caption {
+        padding: 0.5em;
+    }
+
+    .highcharts-data-table thead tr,
+    .highcharts-data-table tr:nth-child(even) {
+        background: #f8f8f8;
+    }
+
+    .highcharts-data-table tr:hover {
+        background: #f1f7ff;
+    }
+</style>
+
 <?php
 $tgt = 0;
 $pennow = 0;
@@ -14,11 +59,33 @@ foreach ($penerimaan as $row) {
 
 
 
+$jml_penerimaan = 0;
+foreach ($pie_penerimaan as $_junk => $data) {
+    $jml_penerimaan = $jml_penerimaan + $data->PENERIMAAN;
+    $jml_penerimaantot = $data->PENERIMAAN_TOT;
+}
+$jml_penerimaan = $jml_penerimaantot - $jml_penerimaan;
+$row = 0;
+
 $datanya_penerimaan = "[";
 foreach ($pie_penerimaan as $_junk => $data) {
-    $datanya_penerimaan = $datanya_penerimaan . "['" . $data->NM_PAJAK . "', " . $data->PENERIMAAN . "],";
+    $datanya_penerimaan = $datanya_penerimaan . "{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . "}";
+    break;
 }
-$datanya_penerimaan = $datanya_penerimaan . "]";
+foreach ($pie_penerimaan as $_junk => $data) {
+    if ($row <> 0) {
+        $datanya_penerimaan = $datanya_penerimaan . ",{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . "}";
+    }
+    $row = $row + 1;
+}
+$datanya_penerimaan = $datanya_penerimaan . ",{name: 'Lainnya',y:" . $jml_penerimaan . "}]";
+
+
+$datapaycomp = "[";
+foreach ($paycomp as $rowp) {
+    $datapaycomp = $datapaycomp . "{name : 'Jmlbln : " . $rowp->JMLBULAN . "',y: " . $rowp->JUMLAHWP . "},";
+}
+$datapaycomp = $datapaycomp . "]";
 
 
 
@@ -28,7 +95,6 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
     <div class="container-fluid">
         <h3>Dashboard Nasional</h3>
         <div class="row clearfix">
-
             <div class="col-lg-3 col-md-6 col-sm-12">
                 <div class="widget">
                     <div class="widget-body">
@@ -95,7 +161,7 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
                                 <h6><b><?= number_format($carryover, 0, ',', '.') ?></b></h6>
                             </div>
                             <div class="icon">
-                                <i class="ik ik-message-square"></i>
+                                <i class="ik ik-alert-triangle"></i>
                             </div>
                         </div>
                         <small class="text-small mt-10 d-block">update <?= $updatex['UPD'] ?></small>
@@ -245,17 +311,17 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
             <div class="col-md-4">
                 <div class="card" style="min-height: 422px;">
                     <div class="card-header">
-                        <h3>Per Jenis Pajak</h3>
+                        <h3>Info Wajib Pajak</h3>
                     </div>
                     <div class="card-body">
-                        <div id="preview_jenis_penerimaan"></div>
+
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-6">
                 <div class="card">
                     <div class="card-header">
                         <h3>Payment Compliance</h3>
@@ -268,15 +334,16 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
                         </div>
                     </div>
                     <div class="card-body">
-
+                        <div id="paycomp"></div>
                     </div>
 
                 </div>
             </div>
-            <div class="col-md-4">
+
+            <div class="col-md-6">
                 <div class="card">
                     <div class="card-header">
-                        <h3>Strength of Figure</h3>
+                        <h3>PerJenis Pajak</h3>
                         <div class="card-header-right">
                             <ul class="list-unstyled card-option">
                                 <li><i class="ik ik-chevron-left action-toggle"></i></li>
@@ -286,15 +353,18 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
                         </div>
                     </div>
                     <div class="card-body">
-
+                        <div id="preview_jenis_penerimaan"></div>
                     </div>
 
                 </div>
             </div>
-            <div class="col-md-4">
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
                 <div class="card">
                     <div class="card-header">
-                        <h3>Info WP</h3>
+                        <h3>Strength of Figure</h3>
                         <div class="card-header-right">
                             <ul class="list-unstyled card-option">
                                 <li><i class="ik ik-chevron-left action-toggle"></i></li>
@@ -304,7 +374,35 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
                         </div>
                     </div>
                     <div class="card-body">
-
+                        <table class="table table-sm">
+                            <thead>
+                                <th class="text-center">SOF</th>
+                                <th class="text-center">WP</th>
+                                <th class="text-center">WP %</th>
+                                <th class="text-center">Jumlah</th>
+                                <th class="text-center">Jumlah %</th>
+                            </thead>
+                            <?=
+                            $totwpsof = 0;
+                            $totjmlsof = 0;
+                            foreach ($parsesof as $datasof) {
+                                $totwpsof += $datasof->WPBYR;
+                                $totjmlsof += $datasof->TOTAL;
+
+                                $pctwp = $datasof->WPBYR / $totwpsof * 100;
+                                $pctpen = $datasof->TOTAL / $totjmlsof * 100;
+                                print_r((array_sum(array($totwpsof))));
+                            ?>
+                                <tbody>
+
+                                    <td><?= $datasof->LAPISAN ?></td>
+                                    <td class="text-right"><?= number_format($datasof->WPBYR, 0, ',', '.') ?></td>
+                                    <td class="text-right"><?= number_format($pctwp, 2) ?></td>
+                                    <td class="text-right"><?= number_format($datasof->TOTAL, 0, ',', '.') ?></td>
+                                    <td class="text-right"><?= number_format($pctpen, 2) ?></td>
+                                </tbody>
+                            <?php } ?>
+                        </table>
                     </div>
 
                 </div>
@@ -477,203 +575,251 @@ $datanya_penerimaan = $datanya_penerimaan . "]";
     </div>
 </div>
 
-<aside class="right-sidebar">
-    <div class="sidebar-chat" data-plugin="chat-sidebar">
-        <div class="sidebar-chat-info">
-            <h6>Chat List</h6>
-            <form class="mr-t-10">
-                <div class="form-group">
-                    <input type="text" class="form-control" placeholder="Search for friends ...">
-                    <i class="ik ik-search"></i>
-                </div>
-            </form>
-        </div>
-        <div class="chat-list">
-            <div class="list-group row">
-                <a href="javascript:void(0)" class="list-group-item" data-chat-user="Gene Newman">
-                    <figure class="user--online">
-                        <img src="img/users/1.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Gene Newman</span> <span class="username">@gene_newman</span> </span>
-                </a>
-                <a href="javascript:void(0)" class="list-group-item" data-chat-user="Billy Black">
-                    <figure class="user--online">
-                        <img src="img/users/2.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Billy Black</span> <span class="username">@billyblack</span> </span>
-                </a>
-                <a href="javascript:void(0)" class="list-group-item" data-chat-user="Herbert Diaz">
-                    <figure class="user--online">
-                        <img src="img/users/3.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Herbert Diaz</span> <span class="username">@herbert</span> </span>
-                </a>
-                <a href="javascript:void(0)" class="list-group-item" data-chat-user="Sylvia Harvey">
-                    <figure class="user--busy">
-                        <img src="img/users/4.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Sylvia Harvey</span> <span class="username">@sylvia</span> </span>
-                </a>
-                <a href="javascript:void(0)" class="list-group-item active" data-chat-user="Marsha Hoffman">
-                    <figure class="user--busy">
-                        <img src="img/users/5.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Marsha Hoffman</span> <span class="username">@m_hoffman</span> </span>
-                </a>
-                <a href="javascript:void(0)" class="list-group-item" data-chat-user="Mason Grant">
-                    <figure class="user--offline">
-                        <img src="img/users/1.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Mason Grant</span> <span class="username">@masongrant</span> </span>
-                </a>
-                <a href="javascript:void(0)" class="list-group-item" data-chat-user="Shelly Sullivan">
-                    <figure class="user--offline">
-                        <img src="img/users/2.jpg" class="rounded-circle" alt="">
-                    </figure><span><span class="name">Shelly Sullivan</span> <span class="username">@shelly</span></span>
-                </a>
-            </div>
-        </div>
-    </div>
-</aside>
-
-<div class="chat-panel" hidden>
-    <div class="card">
-        <div class="card-header d-flex justify-content-between">
-            <a href="javascript:void(0);"><i class="ik ik-message-square text-success"></i></a>
-            <span class="user-name">John Doe</span>
-            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
-        </div>
-        <div class="card-body">
-            <div class="widget-chat-activity flex-1">
-                <div class="messages">
-                    <div class="message media reply">
-                        <figure class="user--online">
-                            <a href="#">
-                                <img src="img/users/3.jpg" class="rounded-circle" alt="">
-                            </a>
-                        </figure>
-                        <div class="message-body media-body">
-                            <p>Epic Cheeseburgers come in all kind of styles.</p>
-                        </div>
-                    </div>
-                    <div class="message media">
-                        <figure class="user--online">
-                            <a href="#">
-                                <img src="img/users/1.jpg" class="rounded-circle" alt="">
-                            </a>
-                        </figure>
-                        <div class="message-body media-body">
-                            <p>Cheeseburgers make your knees weak.</p>
-                        </div>
-                    </div>
-                    <div class="message media reply">
-                        <figure class="user--offline">
-                            <a href="#">
-                                <img src="img/users/5.jpg" class="rounded-circle" alt="">
-                            </a>
-                        </figure>
-                        <div class="message-body media-body">
-                            <p>Cheeseburgers will never let you down.</p>
-                            <p>They'll also never run around or desert you.</p>
-                        </div>
-                    </div>
-                    <div class="message media">
-                        <figure class="user--online">
-                            <a href="#">
-                                <img src="img/users/1.jpg" class="rounded-circle" alt="">
-                            </a>
-                        </figure>
-                        <div class="message-body media-body">
-                            <p>A great cheeseburger is a gastronomical event.</p>
-                        </div>
-                    </div>
-                    <div class="message media reply">
-                        <figure class="user--busy">
-                            <a href="#">
-                                <img src="img/users/5.jpg" class="rounded-circle" alt="">
-                            </a>
-                        </figure>
-                        <div class="message-body media-body">
-                            <p>There's a cheesy incarnation waiting for you no matter what you palete preferences are.</p>
-                        </div>
-                    </div>
-                    <div class="message media">
-                        <figure class="user--online">
-                            <a href="#">
-                                <img src="img/users/1.jpg" class="rounded-circle" alt="">
-                            </a>
-                        </figure>
-                        <div class="message-body media-body">
-                            <p>If you are a vegan, we are sorry for you loss.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <form action="javascript:void(0)" class="card-footer" method="post">
-            <div class="d-flex justify-content-end">
-                <textarea class="border-0 flex-1" rows="1" placeholder="Type your message here"></textarea>
-                <button class="btn btn-icon" type="submit"><i class="ik ik-arrow-right text-success"></i></button>
-            </div>
-        </form>
-    </div>
-</div>
 
 
-<?php echo view('inc/js.php') ?>
-
 
-<script type="text/javascript">
+<?php echo view('inc/js.php') ?>
-    var chart;
 
-    $(document).ready(function() {
 
-        // Build the chart
+<script>
-        chart = new Highcharts.Chart({
+    (function(H) {
-            chart: {
+        H.seriesTypes.pie.prototype.animate = function(init) {
-                renderTo: 'preview_jenis_penerimaan',
+            const series = this,
-                plotBackgroundColor: null,
+                chart = series.chart,
-                plotBorderWidth: null,
+                points = series.points,
-                plotShadow: false
+                {
-            },
+                    animation
-            title: {
+                } = series.options,
-                text: '',
+                {
-                style: {
+                    startAngleRad
-                    fontSize: '18px',
+                } = series;
-                    fontWeight: 'bold',
+
-                    textTransform: 'uppercase'
+            function fanAnimate(point, startAngleRad) {
+                const graphic = point.graphic,
+                    args = point.shapeArgs;
+
+                if (graphic && args) {
+
+                    graphic
+                        // Set inital animation values
+                        .attr({
+                            start: startAngleRad,
+                            end: startAngleRad,
+                            opacity: 1
+                        })
+                        // Animate to the final position
+                        .animate({
+                            start: args.start,
+                            end: args.end
+                        }, {
+                            duration: animation.duration / points.length
+                        }, function() {
+                            // On complete, start animating the next point
+                            if (points[point.index + 1]) {
+                                fanAnimate(points[point.index + 1], args.end);
+                            }
+                            // On the last point, fade in the data labels, then
+                            // apply the inner size
+                            if (point.index === series.points.length - 1) {
+                                series.dataLabelsGroup.animate({
+                                        opacity: 1
+                                    },
+                                    void 0,
+                                    function() {
+                                        points.forEach(point => {
+                                            point.opacity = 1;
+                                        });
+                                        series.update({
+                                            enableMouseTracking: true
+                                        }, false);
+                                        chart.update({
+                                            plotOptions: {
+                                                pie: {
+                                                    innerSize: '10%',
+                                                    borderRadius: 8
+                                                }
+                                            }
+                                        });
+                                    });
+                            }
+                        });
                 }
-            },
+            }
-            tooltip: {
+
-                formatter: function() {
+            if (init) {
-                    return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.y, 0);
+                // Hide points on init
+                points.forEach(point => {
+                    point.opacity = 0;
+                });
+            } else {
+                fanAnimate(points[0], startAngleRad);
+            }
+        };
+    }(Highcharts));
+
+    Highcharts.chart('preview_jenis_penerimaan', {
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: ''
+        },
+        subtitle: {
+            text: ''
+        },
+        tooltip: {
+            pointFormat: 'Peranan: <b>{point.percentage:.1f}%</b>'
+        },
+        accessibility: {
+            point: {
+                valueSuffix: '%'
+            }
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                borderWidth: 2,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b><br>{point.percentage:.1f}%',
+                    distance: 20
                 }
+            }
+        },
+        credits: {
+            enabled: false
+        },
+        series: [{
+            // Disable mouse tracking on load, enable after custom animation
+            enableMouseTracking: false,
+            animation: {
+                duration: 2000
             },
-            colors: ['#7cb5ec', '#f7a35c', '#90ee7e', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#6798BF', '#eeeeee'],
+            colorByPoint: true,
-            plotOptions: {
+            data: <?php echo $datanya_penerimaan  ?>
-                pie: {
+        }]
-                    allowPointSelect: true,
+    });
-                    cursor: 'pointer',
+</script>
-                    dataLabels: {
+
-                        style: {
+
-                            width: '250px'
+<script>
-                        },
+    (function(H) {
-                        enabled: true,
+        H.seriesTypes.pie.prototype.animate = function(init) {
-                        color: '#000000',
+            const series = this,
-                        connectorColor: 'red',
+                chart = series.chart,
-                        formatter: function() {
+                points = series.points,
-                            return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 0) + ' % ';
+                {
-                        }
+                    animation
-                    },
+                } = series.options,
-                    showInLegend: false
+                {
+                    startAngleRad
+                } = series;
+
+            function fanAnimate(point, startAngleRad) {
+                const graphic = point.graphic,
+                    args = point.shapeArgs;
+
+                if (graphic && args) {
+
+                    graphic
+                        // Set inital animation values
+                        .attr({
+                            start: startAngleRad,
+                            end: startAngleRad,
+                            opacity: 1
+                        })
+                        // Animate to the final position
+                        .animate({
+                            start: args.start,
+                            end: args.end
+                        }, {
+                            duration: animation.duration / points.length
+                        }, function() {
+                            // On complete, start animating the next point
+                            if (points[point.index + 1]) {
+                                fanAnimate(points[point.index + 1], args.end);
+                            }
+                            // On the last point, fade in the data labels, then
+                            // apply the inner size
+                            if (point.index === series.points.length - 1) {
+                                series.dataLabelsGroup.animate({
+                                        opacity: 1
+                                    },
+                                    void 0,
+                                    function() {
+                                        points.forEach(point => {
+                                            point.opacity = 1;
+                                        });
+                                        series.update({
+                                            enableMouseTracking: true
+                                        }, false);
+                                        chart.update({
+                                            plotOptions: {
+                                                pie: {
+                                                    innerSize: '20%',
+                                                    borderRadius: 8
+                                                }
+                                            }
+                                        });
+                                    });
+                            }
+                        });
                 }
+            }
+
+            if (init) {
+                // Hide points on init
+                points.forEach(point => {
+                    point.opacity = 0;
+                });
+            } else {
+                fanAnimate(points[0], startAngleRad);
+            }
+        };
+    }(Highcharts));
+
+    Highcharts.chart('paycomp', {
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: ''
+        },
+        subtitle: {
+            text: ''
+        },
+        tooltip: {
+            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b> <br> jmlWP : {point.y}'
+        },
+        accessibility: {
+            point: {
+                valueSuffix: '%'
+            }
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                borderWidth: 2,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b><br>{point.percentage:.1f}%',
+                    distance: 20
+                }
+            }
+        },
+        credits: {
+            enabled: false
+        },
+        series: [{
+            // Disable mouse tracking on load, enable after custom animation
+            enableMouseTracking: false,
+            animation: {
+                duration: 2000
             },
-            exporting: {
+            colorByPoint: true,
-                enabled: false
+            data: <?php echo $datapaycomp ?>
-            },
+        }]
-            credits: {
-                enabled: false
-            },
-            series: [{
-                type: 'pie',
-                name: 'Peranan',
-                data: <?php echo $datanya_penerimaan;  ?>,
-                innerSize: '50%'
-            }]
-        });
     });
 </script>