80 lines
1.1 KiB
JavaScript
80 lines
1.1 KiB
JavaScript
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; |