diff --git a/src/components/Reports/JobAnalytics/JobAnalyticsGraph.jsx b/src/components/Reports/JobAnalytics/JobAnalyticsGraph.jsx index b3c5a797cb..d2193daf87 100644 --- a/src/components/Reports/JobAnalytics/JobAnalyticsGraph.jsx +++ b/src/components/Reports/JobAnalytics/JobAnalyticsGraph.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import PropTypes from "prop-types"; import { Bar } from "react-chartjs-2"; import { @@ -13,20 +13,46 @@ import { import ChartDataLabels from "chartjs-plugin-datalabels"; import styles from "./JobAnalyticsPage.module.css"; -ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, + ChartDataLabels +); export default function JobAnalyticsGraph({ data, darkMode }) { - if (!Array.isArray(data) || data.length === 0) { + const normalizedData = useMemo(() => { + if (!Array.isArray(data)) return []; + + return data + .map((d) => ({ + role: d.role, + applications: + typeof d.applications === "number" + ? d.applications + : typeof d.count === "number" + ? d.count + : 0, + })) + .filter((d) => d.role && d.applications > 0); + }, [data]); + + if (normalizedData.length === 0) { return
No data available
; } const chartData = { - labels: data.map((d) => d.role), + labels: normalizedData.map((d) => d.role), datasets: [ { label: "Applications", - data: data.map((d) => d.applications ?? d.count ?? 0), - backgroundColor: darkMode ? "#3A506B" : "rgba(54, 162, 235, 0.7)", + data: normalizedData.map((d) => d.applications), + backgroundColor: darkMode + ? "#3A506B" + : "rgba(54, 162, 235, 0.7)", }, ], }; @@ -82,7 +108,7 @@ export default function JobAnalyticsGraph({ data, darkMode }) { return (