From f7883883352537c81e8b1ecf59e6d216151f1199 Mon Sep 17 00:00:00 2001
From: = <=>
Date: Wed, 4 Sep 2024 13:12:39 +0700
Subject: [PATCH] identifikasi

---
 .../kytp/componentProgresifitas/SPTTahunan.js | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js

diff --git a/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js b/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js
new file mode 100644
index 00000000..fc5c285a
--- /dev/null
+++ b/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js
@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from "react"
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import { Col, Row } from "reactstrap"
+import { format_angka } from "../util"
+import collect from "collect.js"
+
+const SPTTahunan = ({ dataSend }) => {
+  const base_url = "<?=base_url()?>"
+
+  const refChart = useRef(null)
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranSPTTahunan",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend
+      },
+      success: (data) => {
+        setData(data.data)
+      }
+    })
+  }, [dataSend])
+
+  const optionsChart = (data, title) => {
+    const total_wp = collect(data).sum("y")
+    return {
+      chart: {
+        plotBackgroundColor: null,
+        plotBorderWidth: null,
+        plotShadow: false,
+        type: "pie",
+        zoomType: "xy",
+        height: "300"
+      },
+      title: {
+        text: title,
+        style: { fontSize: "10px" }
+      },
+      tooltip: {
+        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total NPWP yang ada"
+      },
+      accessibility: {
+        point: {
+          valueSuffix: "%"
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          cursor: "pointer",
+          dataLabels: {
+            enabled: true,
+            style: { fontSize: "10px" },
+            format: "{point.name}: <br> {point.percentage:.1f} %"
+          }
+        }
+        // series: pie_click
+      },
+      series: [
+        {
+          name: "",
+          data
+        }
+      ]
+    }
+  }
+  return (
+    <>
+      <Row>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, "SPT Tahunan")} />
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default SPTTahunan