ptb-fe/components/Riwayat/ChartRadarA.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 dynamic from "next/dynamic";
import { getjumlahStatusLaporan } from "../../actions/graph";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });


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

        this.state = {
            series: [{
                name: 'Penjadwalan Evaluasi',
                data: [8, 5, 3, 4, 5, 1, 6, 8, 3, 9, 5, 2, 9, 6, 4, 2],
            }, {
                name: 'Pemeriksaan',
                data: [2, 3, 4, 2, 5, 4, 3, 6, 7, 8, 6, 5, 4, 3, 2, 1],
            }, {
                name: 'Sanksi',
                data: [4, 6, 8, 5, 7, 5, 6, 8, 9, 4, 3, 2, 4, 5, 6, 7],
            }
            ],
            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_jadwal_evaluasi), name: "Penjadwalan Evaluasi" }
                , { data: data.data.map((e) => e.jumlah_pemeriksaan), name: "Pemeriksaan" },
            { data: data.data.map((e) => e.jumlah_sanksi), name: "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)(ChartRadarA);