diff --git a/src/pages/ngo/StatPage/LineChart.jsx b/src/pages/ngo/StatPage/LineChart.jsx index 722814b..730e736 100644 --- a/src/pages/ngo/StatPage/LineChart.jsx +++ b/src/pages/ngo/StatPage/LineChart.jsx @@ -7,10 +7,8 @@ import { PointElement, Title, Tooltip, -} from 'chart.js' -import { - Line, -} from 'react-chartjs-2'; +} from 'chart.js'; +import { Line } from 'react-chartjs-2'; ChartJS.register( LineElement, @@ -24,54 +22,31 @@ ChartJS.register( const LineChart = ({ data }) => { const [view, setView] = useState('day'); - // Null checking for data prop - if (!data || !Array.isArray(data) || data.length === 0) { - console.error("Invalid or empty data provided to LineChart component"); - return
No data available for the chart.
; - } - const convertDataForLineChart = useMemo(() => { const countsPerDay = {}; + const validDates = []; - // Ensure data is an array before forEach - if (Array.isArray(data)) { - data.forEach((report) => { - if (report && typeof report === 'object' && 'reported_time' in report) { - try { - const reportDate = new Date(report.reported_time); - if (!isNaN(reportDate.getTime())) { - const reportedDate = reportDate.toLocaleDateString('en-GB', { - day: '2-digit', - month: '2-digit' - }); - countsPerDay[reportedDate] = (countsPerDay[reportedDate] || 0) + 1; - } else { - console.warn("Invalid date encountered:", report.reported_time); - } - } catch (error) { - console.warn("Error processing report date:", error); - } - } else { - console.warn("Encountered a report with missing or invalid reported_time"); - } - }); - } else { - console.error("Data is not an array in convertDataForLineChart"); - return { dates: [], counts: [] }; - } - - const dates = []; - const validDates = Array.isArray(data) ? data - .filter(report => report && typeof report === 'object' && 'reported_time' in report) - .map(report => { + data.forEach((report, index) => { + if (report && typeof report === 'object' && 'reported_time' in report) { try { - const date = new Date(report.reported_time); - return isNaN(date.getTime()) ? null : date; - } catch { - return null; + const reportDate = new Date(report.reported_time); + if (!isNaN(reportDate.getTime())) { + const reportedDate = reportDate.toLocaleDateString('en-GB', { + day: '2-digit', + month: '2-digit' + }); + countsPerDay[reportedDate] = (countsPerDay[reportedDate] || 0) + 1; + validDates.push(reportDate); + } else { + console.warn(`Invalid date encountered at index ${index}:`, report.reported_time); + } + } catch (error) { + console.warn(`Error processing report date at index ${index}:`, error); } - }) - .filter(date => date !== null) : []; + } else { + console.warn(`Encountered a report with missing or invalid reported_time at index ${index}`); + } + }); if (validDates.length === 0) { console.error("No valid dates found in the data"); @@ -80,6 +55,7 @@ const LineChart = ({ data }) => { const minDate = new Date(Math.min(...validDates)); const maxDate = new Date(Math.max(...validDates)); + const dates = []; for (let currentDate = new Date(minDate); currentDate <= maxDate; currentDate.setDate(currentDate.getDate() + (view === 'day' ? 1 : view === 'week' ? 7 : view === 'month' ? 30 : 365))) { const formattedDate = currentDate.toLocaleDateString('en-GB', { @@ -99,8 +75,7 @@ const LineChart = ({ data }) => { const { dates, counts } = convertDataForLineChart; - // Check if we have valid data after conversion - if (!dates || !counts || !Array.isArray(dates) || !Array.isArray(counts) || dates.length === 0 || counts.length === 0) { + if (!dates.length || !counts.length) { console.error("No valid data after conversion in LineChart component"); return
Unable to generate chart due to insufficient data.
; } @@ -189,4 +164,4 @@ const LineChart = ({ data }) => { ) } -export default LineChart; \ No newline at end of file +export default LineChart;