Merge pull request #4722 from OneCommunityGlobal/Neeraj_Hotfix_Restore_Job_Analytics_Graph_Data

Neeraj Hotfix Restore Job Analytics Graph Data Rendering

Author: one-community

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 <p>No data available</p>;
   }
 
   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,15 +108,15 @@ export default function JobAnalyticsGraph({ data, darkMode }) {
 
   return (
     <div className={styles.graphContainer}>
-      <Bar data={chartData} options={chartOptions} plugins={[ChartDataLabels]} />
+      <Bar data={chartData} options={chartOptions} />
     </div>
   );
 }
 
 JobAnalyticsGraph.propTypes = {
   data: PropTypes.arrayOf(
     PropTypes.shape({
-      role: PropTypes.string.isRequired,
+      role: PropTypes.string,
       applications: PropTypes.number,
       count: PropTypes.number,
     })