maps menyesuaikan, graph b live

components/Riwayat/ChartRadarB.js

@@ -4,6 +4,7 @@ import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 import { connect } from "react-redux";
 import { jumlahLaporan } from "@/actions/pelaporan";
 import dynamic from "next/dynamic";
+import { getjumlahStatusLaporan } from "../../actions/graph";
 const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 
@@ -11,7 +12,7 @@ class ChartRadarB extends React.Component {
     constructor(props) {
         super(props);
 
-        this.radar = {
+        this.state = {
             series: [
                 {
                     name: 'Keberatan',
@@ -52,12 +53,30 @@ class ChartRadarB extends React.Component {
             },
         };
     }
+
+    async componentDidMount() {
+        const { token } = this.props;
+        const data = await getjumlahStatusLaporan(this.props.token);
+        this.setState((prevState) => ({
+            ...prevState,
+            series: [{ data: data.data.map((e) => e.jumlah_keberatan), name: "Keberatan" }
+                , { data: data.data.map((e) => e.jumlah_banding), name: "Banding" },
+            { data: data.data.map((e) => e.jumlah_pemantauan_perbaikan), name: "Pemantauan perbaikan" },
+            { data: data.data.map((e) => e.jumlah_pencabutan_sanksi), name: "Pencabutan sanksi" }],
+            options: {
+                ...prevState,
+                xaxis: {
+                    categories: data.data.map((data) => data.pembina.name),
+                },
+            },
+        }));
+    }
     render() {
         return (
             <Card className="card-default">
                 <CardBody>
                     <div id="chart">
-                        <ReactApexChart options={this.radar.options} series={this.radar.series} type="radar" height={400} />
+                        <ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={400} />
                     </div>
                 </CardBody>
             </Card>

components/Riwayat/Maps.js

@@ -10,44 +10,80 @@ const defaultColors = {
     scaleColors: ["#146804", "#ff0000"],
     regionFill: '#bbbec6'
 };
-
 const RegionValues = {
-    'ID_su': 1,
-    'ID_su': 2,
-    'ID_ss': 3,
-    'ID_la': 4,
-    'ID_be': 5,
-    'ID_bb': 6,
-    'ID_jk': 2,
-    'ID_jb': 9,
-    'ID_bt': 9,
-    'ID_yo': 8,
-    'ID_jt': 5,
-    'ID_jl': 1,
-    'ID_ba': 2,
-    'ID_nb': 1,
-    'ID_sg': 1,
-    'ID_sn': 1,
-    'ID_sr': 1,
-    'ID_sb': 10,
-    'ID_ri': 10,
-    'ID_kr': 10,
-    'ID_ja': 10,
-    'ID_ks': 11,
-    'ID_kb': 11,
-    'ID_ki': 11,
-    'ID_kt': 11,
-    'ID_ku': 11,
-    'ID_ma': 12,
-    'ID_mu': 12,
-    'ID_ac': 13,
-    'ID_pa': 14,
-    'ID_pb': 14,
-    'ID_nt': 15,
-    'ID_go': 16,
-    'ID_st': 16,
-    'ID_sa': 16,
+    'ID_su': 0,
+    'ID_su': 0,
+    'ID_ss': 0,
+    'ID_la': 0,
+    'ID_be': 0,
+    'ID_bb': 0,
+    'ID_jk': 33,
+    'ID_jb': 0,
+    'ID_bt': 0,
+    'ID_yo': 0,
+    'ID_jt': 0,
+    'ID_jl': 0,
+    'ID_ba': 0,
+    'ID_nb': 0,
+    'ID_sg': 0,
+    'ID_sn': 0,
+    'ID_sr': 0,
+    'ID_sb': 0,
+    'ID_ri': 0,
+    'ID_kr': 0,
+    'ID_ja': 0,
+    'ID_ks': 0,
+    'ID_kb': 0,
+    'ID_ki': 0,
+    'ID_kt': 0,
+    'ID_ku': 0,
+    'ID_ma': 0,
+    'ID_mu': 0,
+    'ID_ac': 0,
+    'ID_pa': 0,
+    'ID_pb': 0,
+    'ID_nt': 0,
+    'ID_go': 0,
+    'ID_st': 0,
+    'ID_sa': 0,
 }
+// const RegionValues = {
+//     'ID_su': 1,
+//     'ID_su': 2,
+//     'ID_ss': 3,
+//     'ID_la': 4,
+//     'ID_be': 5,
+//     'ID_bb': 6,
+//     'ID_jk': 2,
+//     'ID_jb': 9,
+//     'ID_bt': 9,
+//     'ID_yo': 8,
+//     'ID_jt': 5,
+//     'ID_jl': 1,
+//     'ID_ba': 2,
+//     'ID_nb': 1,
+//     'ID_sg': 1,
+//     'ID_sn': 1,
+//     'ID_sr': 1,
+//     'ID_sb': 10,
+//     'ID_ri': 10,
+//     'ID_kr': 10,
+//     'ID_ja': 10,
+//     'ID_ks': 11,
+//     'ID_kb': 11,
+//     'ID_ki': 11,
+//     'ID_kt': 11,
+//     'ID_ku': 11,
+//     'ID_ma': 12,
+//     'ID_mu': 12,
+//     'ID_ac': 13,
+//     'ID_pa': 14,
+//     'ID_pb': 14,
+//     'ID_nt': 15,
+//     'ID_go': 16,
+//     'ID_st': 16,
+//     'ID_sa': 16,
+// }
 const LLDIKTI = {
     'ID_su': '<h5>LLDIKTI Wilayah I</h5>',
     'ID_ss': '<h5>LLDIKTI Wilayah II</h5>',