PTB-fe/components/PelaporanTuntas/CaseProgress.js

import React, { Component, useState, useEffect } from "react";
import { Progress } 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, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
import Datatable from "@/components/Tables/Datatable";
import MorrisChart from "@/components/Charts//Morris";
import { Button } from "reactstrap";
import Dropdown from 'react-bootstrap/Dropdown';

function CaseProgress({ data, nextButton, prevButton, tahun, excelSemua, excelMenu }) {
	const ChartBar = {
		data: [
			{
				// "label": "Complete",
				color: "#287DAD",
				data: [["Selesai", data.jumlah_selesai]],
			},
			{
				// "label": "In Progress",
				color: "#FD4233",
				data: [["Ditutup", data.jumlah_ditutup]],
			},
		],

		options: {
			series: {
				bars: {
					align: "center",
					lineWidth: 0,
					show: true,
					barWidth: 0.2,
					fill: 0.9,
				},
			},
			grid: {
				borderColor: "#eee",
				borderWidth: 1,
				hoverable: true,
				backgroundColor: "#fcfcfc",
			},
			tooltip: true,
			tooltipOpts: {
				content: (label, x, y) => x + " : " + y,
			},
			xaxis: {
				tickColor: "#fcfcfc",
				mode: "categories",
			},
			yaxis: {
				// position: 'right' or 'left'
				tickColor: "#eee",
			},
			shadowSize: 0,
		},
	};

	const ChartPie = {
		data: [
			{
				label: "Selesai",
				color: "#287DAD",
				data: [data.jumlah_selesai],
			},
			{
				label: "Ditutup",
				color: "#FD4233",
				data: [data.jumlah_ditutup],
			},
		],

		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>
					<Dropdown className="float-right">
						<Dropdown.Toggle variant="success" id="dropdown-basic">
							Unduh
						</Dropdown.Toggle>
						<Dropdown.Menu>
							<Dropdown.Item onClick={excelMenu}>Unduh dokumen pelaporan tuntas</Dropdown.Item>
							<Dropdown.Item onClick={excelSemua}>Unduh dokumen semua menu</Dropdown.Item>
						</Dropdown.Menu>
					</Dropdown>
				</div>
				<div className="header-1">
					<h2 className="card-title-1">Perkembangan</h2>
				</div>
				<div className="w-401">
					<FlotChart options={ChartBar.options} data={ChartBar.data} 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>
	);
}

export default CaseProgress;