ptb-fe/components/Pelaporan/CaseProgress.js

import { Pagination, Progress, PaginationItem, PaginationLink, Button } from "reactstrap";
import Sparkline from "@/components/Common/Sparklines";
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
import FlotChart from "@/components/Charts/Flot.js";
import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLine, ChartPie } from "@/components/Config/flot.setup.js";
import Datatable from "@/components/Tables/Datatable";
import { useState, useEffect } from "react";

function CaseProgress({ data, nextButton, prevButton, tahun, newLaporan }) {
	const laporan_pertahun = data.laporan_perTahun;

	const [chartData, setChartData] = useState([
		{
			// "label": "sales",
			color: "#287DAD",
			data: [],
		},
	]);

	useEffect(() => {
		laporan_pertahun.forEach((e) => {
			chartData[0].data.push([convertMonth(e._id.bulan), e.jumlah_laporan]);
		});
	}, []);

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

	const ChartPie = {
		data: [
			{
				label: "Pelaporan masuk",
				color: "#287DAD",
				data: 40,
			},
			{
				label: "Pelaporan selesai",
				color: "#52D489",
				data: 70,
			},
		],

		options: {
			series: {
				pie: {
					show: true,
					innerRadius: 0,
					label: {
						show: true,
						radius: 0.8,
						formatter: function (label, series) {
							return (
								'<div class="flot-pie-label">' +
								//label + ' : ' +
								Math.round(series.percent) +
								"%</div>"
							);
						},
						background: {
							opacity: 0.8,
							color: "#222",
						},
					},
				},
			},
		},
	};

	return (
		<div className="card b">
			<div className="card-body bb">
				<div className="margin-botton-20 text-tahun">
					<Button className="float-left button-hidden icon-next" onClick={prevButton}>
						<img src="/static/img/previous.png"></img>
					</Button>
					<Button className="float-left button-hidden icon-next" onClick={nextButton}>
						<img src="/static/img/next.png"></img>
					</Button>
					<b className="text-tahun">Tahun {tahun} </b>
					<Button className="float-right button-hidden icon-eksport">
						<img src="/static/img/eksport.png"></img>
					</Button>
				</div>
				<div className="header-1">
					<h2 className="card-title-1">Perkembangan</h2>
				</div>
				<div className="w-400">
					<FlotChart options={ChartBar.options} data={chartData} className="flot-chart" height="200px" />
				</div>
			</div>
			<div className="card-body">
				<div className="header-1">
					<h2 className="card-title-1">Rekapitulasi</h2>
				</div>
				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
			</div>
			<div className="card-body">
				<div className="header-1">
					<h2 className="card-title-1">Laporan Terbaru</h2>
				</div>
				{newLaporan.map((value) => (
					<h5 className="card-title text-left py-2 bg-gray border-radius-login">
						<b className="f-size">{`${value.no_laporan} - ${value.pt.nama}`}</b>
					</h5>
				))}
			</div>
		</div>
	);
}

export default CaseProgress;