135 lines
4.2 KiB
React
135 lines
4.2 KiB
React
|
// import React, { useEffect, useRef, useState } from 'react';
|
||
|
|
// import Highcharts from 'highcharts';
|
||
|
|
// import HighchartsReact from 'highcharts-react-official';
|
||
|
|
// import "./PieChart.scss"
|
||
|
|
// const DynamicPieChart = ({ chartData }) => {
|
||
|
|
// const [overallValue, setOverallValue] = useState(0);
|
||
|
|
// const chartRef = useRef();
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// if (chartRef.current && chartData) {
|
||
|
|
// const chart = chartRef.current.chart;
|
||
|
|
// chart.series[0].setData(chartData);
|
||
|
|
// const sum = chartData.reduce((total, dataPoint) => total + dataPoint.y, 0);
|
||
|
|
// setOverallValue(sum);
|
||
|
|
|
||
|
|
// // Update the chart title to include the overall value
|
||
|
|
// chart.setTitle({ text: `Overall Amount: ${sum}` });
|
||
|
|
// }
|
||
|
|
// }, [chartData]);
|
||
|
|
|
||
|
|
// return (
|
||
|
|
// <div style={{width:"inherit"}}>
|
||
|
|
// <HighchartsReact
|
||
|
|
// highcharts={Highcharts}
|
||
|
|
// options={{
|
||
|
|
// chart: {
|
||
|
|
// type: 'pie'
|
||
|
|
// },
|
||
|
|
// title: {
|
||
|
|
// text: `Overall Amount: ${overallValue}` // Initial title with overall value
|
||
|
|
// },
|
||
|
|
// series: [{
|
||
|
|
// name: 'Amount',
|
||
|
|
// data: chartData
|
||
|
|
// }]
|
||
|
|
// }}
|
||
|
|
// ref={chartRef}
|
||
|
|
// />
|
||
|
|
// </div>
|
||
|
|
// );
|
||
|
|
// };
|
||
|
|
|
||
|
|
// export default DynamicPieChart;
|
||
|
|
|
||
|
|
// import React, { useEffect, useRef, useState } from 'react';
|
||
|
|
// import Highcharts from 'highcharts';
|
||
|
|
// import HighchartsReact from 'highcharts-react-official';
|
||
|
|
// import "./PieChart.scss"
|
||
|
|
// const DynamicPieChart = ({ chartData }) => {
|
||
|
|
// const [overallValue, setOverallValue] = useState(0);
|
||
|
|
// const chartRef = useRef();
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// if (chartRef.current && chartData) {
|
||
|
|
// const chart = chartRef.current.chart;
|
||
|
|
// chart.series[0].setData(chartData);
|
||
|
|
// const sum = chartData.reduce((total, dataPoint) => total + dataPoint.y, 0);
|
||
|
|
// setOverallValue(sum);
|
||
|
|
|
||
|
|
// // Update the chart title to include the overall value
|
||
|
|
// chart.setTitle({ text: `Overall Amount: ${sum}` });
|
||
|
|
// }
|
||
|
|
// }, [chartData]);
|
||
|
|
|
||
|
|
// return (
|
||
|
|
// <div style={{ width: "inherit" }}>
|
||
|
|
// <HighchartsReact
|
||
|
|
// highcharts={Highcharts}
|
||
|
|
// options={{
|
||
|
|
// chart: {
|
||
|
|
// type: 'pie'
|
||
|
|
// },
|
||
|
|
// title: {
|
||
|
|
// text: `Overall Amount: ${overallValue}`
|
||
|
|
// },
|
||
|
|
// series: [{
|
||
|
|
// name: 'Amount',
|
||
|
|
// data: chartData
|
||
|
|
// }]
|
||
|
|
// }}
|
||
|
|
// ref={chartRef}
|
||
|
|
// />
|
||
|
|
// </div>
|
||
|
|
// );
|
||
|
|
// };
|
||
|
|
|
||
|
|
// export default DynamicPieChart;
|
||
|
|
|
||
|
|
// create by sree
|
||
|
|
import React, { 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;
|