ptb-fe/components/Riwayat/ChartDataBar.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 { getjumlahStatusLaporan } from "@/actions/graph";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
//sudah live
class ChartDataBar extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			series: [
				{
					data: [44, 55, 41, 64, 22, 43, 21, 44, 42, 67, 43, 86, 42, 99, 131, 313],
					name: "jumlah laporan",
				},
			],
			options: {
				chart: {
					type: "bar",
					height: 430,
				},
				plotOptions: {
					bar: {
						horizontal: true,
						dataLabels: {
							position: "top",
						},
					},
				},
				chart: {
					toolbar: {
						show: true,
						tools: {
							download: false,
						},
					},
				},

				colors: ["#B2B0D2"],
				dataLabels: {
					enabled: true,
					offsetX: -6,
					style: {
						fontSize: "12px",
						colors: ["#333333"],
					},
				},
				stroke: {
					show: false,
					width: 1,
					colors: ["#fff"],
					followCursor: true,
				},
				tooltip: {
					shared: true,
					intersect: false,
				},
				xaxis: {
					categories: ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"],
					// name: ["LLDikti I", "LLDikti II", "LLDikti III", "LLDikti IV", "LLDikti V", "LLDikti VI", "LLDikti VII", "LLDikti VIII", "LLDikti IX", "LLDikti X", "LLDikti XI", "LLDikti XII", "LLDikti XIII", "LLDikti XIV", "LLDikti XV", "LLDikti XVI"]
				},
				fill: {
					colors: ["#B2B0D2"],
				},
			},
		};
	}

	async componentDidMount() {
		const { token } = this.props;
		const data = await getjumlahStatusLaporan(token);
		this.setState((prevState) => ({
			...prevState,
			series: [{ data: data.data.map((e) => e.jumlah_laporan), name: "jumlah laporan" }],
			options: {
				...prevState.options,
				xaxis: {
					categories: data.data.map((e) => e.pembina.name),
				},
			},
		}));
	}
	render() {
		return (
			<Card className="card-default">
				<CardBody>
					<div id="chart">
						<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={400} />
					</div>
				</CardBody>
			</Card>

		);
	}
}

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