PTB-fe/components/Riwayat/ChartRadarB.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
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 });


class ChartRadarB extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            series: [
                {
                    name: 'Keberatan',
                    data: [8, 6, 8, 1, 2, 3, 4, 5, 6, 7, 8, 8, 7, 6, 5, 3],
                },
                {
                    name: 'Banding',
                    data: [4, 6, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 4],
                }
                , {
                    name: 'Pemantauan Perbaikan',
                    data: [4, 6, 8, 4, 5, 6, 7, 8, 8, 9, 3, 4, 5, 6, 7, 3],
                }
                , {
                    name: 'Pencabutan Sanksi',
                    data: [4, 6, 6, 9, 8, 7, 6, 3, 2, 1, 8, 5, 4, 3, 6, 7],
                    colors: "#B2B0D2",
                },],
            options: {
                chart: {
                    height: 150,
                    type: 'radar',
                },
                xaxis: {
                    categories: ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"]
                },
                chart: {
                    toolbar: {
                        show: true,
                        tools: {
                            download: false,
                        },
                    },
                },
                // legend: {
                //     show: false,
                // }
            },
        };
    }

    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.state.options} series={this.state.series} type="radar" height={400} />
                    </div>
                </CardBody>
            </Card>
        );
    }
}

const MapStateToProps = (state) => ({ token: state.token });
export default connect(MapStateToProps)(ChartRadarB);