55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
import { useMemo } from 'react';
|
|
import Highcharts from 'highcharts';
|
|
import HighchartsReact from 'highcharts-react-official';
|
|
import './PieChart.scss';
|
|
|
|
const DynamicPieChart = ({ chartData }) => {
|
|
const safeRound = (val) => {
|
|
if (val == null) return '0.00';
|
|
const num = Number(String(val).replace(/[^0-9.-]+/g, ''));
|
|
return isNaN(num) ? '0.00' : num.toFixed(2);
|
|
};
|
|
|
|
const overallValue = useMemo(
|
|
() => chartData?.reduce((total, { y }) => total + (y || 0), 0) || 0,
|
|
[chartData]
|
|
);
|
|
|
|
if (!chartData?.length) {
|
|
return (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: '250px',
|
|
backgroundColor: '#fafafa',
|
|
color: '#999',
|
|
fontSize: '16px',
|
|
fontWeight: '500',
|
|
border: '1px dashed #d9d9d9',
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
No Data Found
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ width: 'inherit' }}>
|
|
<HighchartsReact
|
|
highcharts={Highcharts}
|
|
options={{
|
|
chart: { type: 'pie' },
|
|
title: { text: `Overall Amount : ${safeRound(overallValue)}` },
|
|
series: [{ name: 'Amount', data: chartData }],
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DynamicPieChart;
|