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


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

        this.radar = {
            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],
            }
            ],
            colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
            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,
                // }
            },

        };
    }
    render() {
        return (
            <Card className="card-default">
                <CardBody>
                    <div id="chart">
                        <ReactApexChart options={this.radar.options} series={this.radar.series} type="radar" height={400} />
                    </div>
                </CardBody>
            </Card>
        );
    }
}

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