import React from "react";
import ReactApexChart from "react-apexcharts";

const ApexChart = ({ completed = 0, planned = 1 }) => {
const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;

const options = {
chart: {
height: 200,
type: "radialBar",
toolbar: { show: false },
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "60%",
background: "#fff",
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 3,
opacity: 0.45,
},
},
track: {
background: "#f5f5f5",
strokeWidth: "67%",
dropShadow: { enabled: false },
},
dataLabels: {
show: true,
name: {
offsetY: -10,
color: "#888",
fontSize: "14px",
},
value: {
formatter: (val) => `${val}%`,
color: "#111",
fontSize: "24px",
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Progress"],
};

return (
<div id="chart">
<ReactApexChart
options={options}
series={[percentage]}
type="radialBar"
height={200}
/>
</div>
);
};

export default ApexChart;