ptb-fe/components/Main/ChartdataHome.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 { getPengunjungPublic } from "@/actions/pengunjung";
class ChartdataHome extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dataPengunjung: [],
			dataChart: this.ChartSpline,
		};
	}

	componentDidMount = async () => {
		const dataPengunjung = await getPengunjungPublic({ bulan: new Date().getMonth() + 1, tahun: new Date().getFullYear() });
		this.setState({ dataPengunjung: dataPengunjung.data.map((e) => [e._id.tanggal, e.jumlah_pengunjung]) });
		this.setState((prevState) => ({ dataChart: { ...prevState.dataChart, data: [{ ...prevState.dataChart.data[0], data: prevState.dataPengunjung }] } }));
	};

	ChartSpline = {
		data: [
			{
				// label: "Uniques",
				color: "#3e3a8e",
				data: [],
			},
		],

		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,
		},
	};

	convertMonth = (int) => {
		switch (int) {
			case 1:
				return "Januari";
				break;
			case 2:
				return "Februari";
				break;
			case 3:
				return "Maret";
				break;
			case 4:
				return "April";
				break;
			case 5:
				return "Mei";
				break;
			case 6:
				return "Juni";
				break;
			case 7:
				return "Juli";
				break;
			case 8:
				return "Agustus";
				break;
			case 9:
				return "September";
				break;
			case 10:
				return "Oktober";
				break;
			case 11:
				return "November";
				break;
			case 12:
				return "Desember";
				break;
			default:
				break;
		}
	};

	render() {
		return (
			<Col lg={12}>
				<Card>
					<CardBody>
						<FlotChart options={this.ChartSpline.options} data={this.state.dataChart.data} className="flot-chart" height="150px" width="300px" />
					</CardBody>
					<div align="center">
						<h5 className="font-weight-bold" style={{ fontSize: "12px", marginTop: "3px" }}>Data Statistik Pengunjung Bulan {`${this.convertMonth(new Date().getMonth() + 1)} ${new Date().getFullYear()}`}</h5>
					</div>
				</Card>
			</Col>
		);
	}
}

export default ChartdataHome;