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 { jumlahLaporan } from "@/actions/pelaporan";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

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],
				},
			],
			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: true,
					width: 1,
					colors: ["#fff"],
				},
				tooltip: {
					shared: true,
					intersect: false,
				},
				xaxis: {
					categories: ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"],
				},
			},
		};
	}

	async componentDidMount() {
		const { token } = this.props;
		const data = await jumlahLaporan(token);
		console.log(data.data);
	}

	render() {
		return (
			<div id="chart">
				<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430} />
			</div>
		);
	}
}

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