PTB-fe/components/Riwayat/ChartData.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";

import Sparkline from "@/components/Common/Sparklines.js";
import FlotChart from "@/components/Charts/Flot.js";
import { connect } from "react-redux";
import { getPengunjung } from "@/actions/pengunjung";
class ChartData extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dataPengunjung: [],
		};
	}

	async componentDidMount() {
		const { token } = this.props;
		const dataPengunjung = await getPengunjung(token);
		this.setState({ dataPengunjung: dataPengunjung.data.map((e) => [e._id.bulan, e.jumlah_pengunjung]) });
	}

	ChartSpline = {
		data: [
			{
				// label: "Uniques",
				color: "#3e3a8e",
				data: [
					["Jan", 20],
					["Feb", 90],
					["Mar", 40],
					["Apr", 85],
					["Mei", 59],
					["Jun", 93],
					["Jul", 66],
					["Agu", 86],
					["Sep", 60],
					["Okt", 70],
					["Nov", 60],
					["Des", 30],
				],
			},
		],

		options: {
			series: {
				lines: {
					show: false,
				},
				points: {
					show: true,
					radius: 4,
				},
				splines: {
					show: true,
					tension: 0.4,
					lineWidth: 1,
					fill: 0.5,
				},
			},
			grid: {
				borderColor: "#eee",
				borderWidth: 1,
				hoverable: true,
				backgroundColor: "#fcfcfc",
			},
			tooltip: true,
			tooltipOpts: {
				content: (label, x, y) => x + " : " + y,
			},
			xaxis: {
				tickColor: "#fcfcfc",
				mode: "categories",
			},
			yaxis: {
				min: 0,
				max: 150, // optional: use it for a clear represetation
				tickColor: "#eee",
				//position: 'right' or 'left',
				tickFormatter: (v) => v /* + ' visitors'*/,
			},
			shadowSize: 0,
		},
	};

	render() {
		console.log(this.state.dataPengunjung);
		return (
			<Col lg={12}>
				<Card className="card-default">
					<CardBody>
						<FlotChart options={this.ChartSpline.options} data={this.ChartSpline.data} className="flot-chart" height="250px" />
					</CardBody>
					<div align="center">
						<span>Data Statistik Pengunjung Tahun 2022</span>
					</div>
				</Card>
			</Col>
		);
	}
}

const mapStateToProps = (state) => ({ token: state.token });
export default connect(mapStateToProps)(ChartData);