update chart komposisi penerimaan

eispajak/views/templates/pcpd_pajak.pt

@@ -83,16 +83,16 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-md-8">
+    <div class="col-md-6">
       <div class="panel panel-default">
         <div class="panel-body">
           <table class="table table-bordered table-sm" id="table1">
             <thead>
               <tr>
-                <th class="align-middle text-center">Kode</th>
-                <th class="align-middle text-center">Jenis Pajak</th>
-                <th class="text-center">Besaran Komposisi <br>Dalam Penerimaan <br>Pajak Daerah (%)</th>
-                <th class="text-center">Realisasi</th>
+                <th style="vertical-align: middle;text-align:center !important;" class="align-middle text-center">No.</th>
+                <th style="vertical-align: middle;text-align:center !important;" class="align-middle text-center">Jenis Pajak</th>
+                <th style="vertical-align: middle;text-align:center !important;" class="text-center">Besaran Komposisi <br>Dalam Penerimaan <br>Pajak Daerah (%)</th>
+                <th style="vertical-align: middle;text-align:center !important;" class="text-center">Realisasi</th>
               </tr>
             </thead>
             <tbody>
@@ -113,11 +113,11 @@
       </div>
     </div>
     <!-- Gauge Chart Section -->
-    <div class="col-md-4">
+    <div class="col-md-6">
       <div class="panel panel-default" id="gaugePanel" style="min-height: 500px;">
-        <div class="panel-body" style="padding: 0; height: calc(100% - 50px); overflow: hidden; display: flex; flex-direction: column;">
-          <div id="chartContainer" style="flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
-            <canvas id="chartPie"></canvas>
+        <div class="panel-body">
+          <div>
+            <div id="chartContainer" style="height: 300px; width: 100%;"></div>
           </div>
         </div>
       </div>
@@ -126,6 +126,11 @@
   <hr>
 
   <div class="row hide">
+    <div class="panel-body" style="padding: 0; height: calc(100% - 50px); overflow: hidden; display: flex; flex-direction: column;">
+          <div id="chartContainer" style="flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
+              <canvas id="chartPie"></canvas>
+          </div>
+        </div>
     <div class="text-center" style="padding: 10px; background: rgba(0,0,0,0.02); border-top: 1px solid #ddd;">
       <h4 id="gaugePercentage" style="margin: 2px 0; font-weight: bold; color: #333; font-size: 16px;">63.70%</h4>
     </div>
@@ -212,6 +217,7 @@
   <script src="${home}/eis/static/js/odometer.js"></script>
   <script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script>
   <script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script>
+  <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
 </metal:js>
 
 
@@ -537,6 +543,15 @@
     chart.update();
   }
 
+  function addDataPie(chart, data) {
+    chart.options.data[0].dataPoints = [];
+    chart.render();
+    data.forEach(element => {
+      chart.options.data[0].dataPoints.push({ y: element[1], name: element[0], exploded: true });
+    });
+    chart.render();
+  }
+
   trendChart = function () {
     if (rangeType.value == 1) {
       amtTrendChartData = newData.daily;
@@ -593,10 +608,10 @@
       "scrollX": true,
       "ordering":false,
       "columnDefs": [
-        { className: 'text-center', width: "20px", targets: [0] },
-        { className: 'text-left', targets: [1] },
-        { className: 'text-right', targets: [2] },
-        { className: 'text-right', targets: [3], render: $.fn.dataTable.render.number('.', ',', 0, '') },
+        { className: 'text-center', width: "2px", targets: [0] },
+        { className: 'text-left',width: "20px", targets: [1] },
+        { className: 'text-right', width: "80px", targets: [2] },
+        { className: 'text-right', width: "20px", targets: [3], render: $.fn.dataTable.render.number('.', ',', 0, '') },
       ]
     }
   );
@@ -620,10 +635,11 @@
           sum_persen += row.persen;
         });
         var c = [];
+        var d = 0;
         data.forEach(function (row) {
           sum_besaran += (row.realisasi/sum_realisasi)*100;
           table.row.add([
-            row.kode,
+            d+=1,
             row.nama,
             ((row.realisasi/sum_realisasi)*100).toFixed(2),
             row.realisasi,
@@ -701,6 +717,7 @@
       if (status === "success") {
         newData = data;
         addData(pieChart, newData.pie);
+        addDataPie(chartPieW, newData.pie);
         
         setTimeout(function () {
             console.log("timeout");
@@ -721,7 +738,39 @@
         $().datarefresh();
       }, 60000);
     });
+
+  var chartPieW = new CanvasJS.Chart("chartContainer", {
+    exportEnabled: true,
+    animationEnabled: true,
+    title:{
+      text: ""
+    },
+    legend:{
+      cursor: "pointer",
+      itemclick: explodePie
+    },
+    data: [{
+      type: "pie",
+      showInLegend: false,
+      toolTipContent: "{name}: <strong>{y}%</strong>",
+      indexLabel: "{name} - {y}%",
+      dataPoints: [
+        { y: 100, name: "ALL Pajak", exploded: true },
+      ]
+    }]
+  });
+  chartPieW.render();
+
   }
+  function explodePie (e) {
+	if(typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === "undefined" || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
+		e.dataSeries.dataPoints[e.dataPointIndex].exploded = true;
+	} else {
+		e.dataSeries.dataPoints[e.dataPointIndex].exploded = false;
+	}
+	e.chart.render();
+
+}
 </script>
 
 </html>
\ No newline at end of file