Merge pull request #1683 from openedx/maham/ENT-10916

Author: mahamakifdar19

src/components/AdvanceAnalyticsV2.0/charts/TopSkillsChart.jsx

@@ -15,7 +15,7 @@ const TopSkillsChart = ({
   const markerSizes = calculateMarkerSizes(data, 'completions');
 
   return (
-    <div className="bg-primary-100 rounded-lg container-fluid p-3 mb-3 mt-3 outcomes-chart-container">
+    <div className="bg-primary-100 rounded-lg container-fluid p-3 mb-3 outcomes-chart-container">
       <div className="mb-4 h-100 overflow-hidden">
         <Header
           title={intl.formatMessage({

src/components/AdvanceAnalyticsV2.0/tabs/Engagements.jsx

@@ -9,15 +9,12 @@ import {
 import {
   useEnterpriseEngagementData,
   useEnterpriseAnalyticsAggregatesData,
-  useEnterpriseAnalyticsData,
   useEnterpriseEnrollmentsData,
   useEnterpriseCourses,
   useEnterpriseBudgets,
 } from '../data/hooks';
 import AnalyticsFilters from '../AnalyticsFilters';
 import Stats from '../Stats';
-import SkillsByEnrollmentChart from '../charts/SkillsByEnrollmentChart';
-import SkillsByLearningHoursChart from '../charts/SkillsByLearningHoursChart';
 import Leaderboard from '../tables/LeaderboardTable';
 import EnrollmentsOverTimeChart from '../charts/EnrollmentsOverTimeChart';
 import LearningHoursOverTimeChart from '../charts/LearningHoursOverTimeChart';
@@ -54,20 +51,6 @@ const Engagements = ({ enterpriseId }) => {
     budgetUUID,
   });
 
-  // Skills Data
-  const {
-    isFetching: isSkillsFetching, isError: isSkillsError, data: skillsData,
-  } = useEnterpriseAnalyticsData({
-    enterpriseCustomerUUID: enterpriseId,
-    key: ANALYTICS_TABS.SKILLS,
-    startDate,
-    endDate,
-    groupUUID,
-    courseType,
-    course,
-    budgetUUID,
-  });
-
   // Engagements Data
   const {
     isFetching: isEngagementFetching, isError: isEngagementError, data: engagementData,
@@ -189,30 +172,8 @@ const Engagements = ({ enterpriseId }) => {
         activeTab={ANALYTICS_TABS.ENGAGEMENTS}
       />
 
-      {/* Skills Chart */}
-      <div className="row py-3 gx-4 mb-2">
-        {/* Skills By Enrollment Chart */}
-        <div className="col-6">
-          <SkillsByEnrollmentChart
-            isFetching={isSkillsFetching}
-            isError={isSkillsError}
-            data={skillsData?.topSkillsByEnrollments}
-            onClick={handleChartClick}
-          />
-        </div>
-        {/* Skills By Learning Hours Charts */}
-        <div className="col-6">
-          <SkillsByLearningHoursChart
-            isFetching={isSkillsFetching}
-            isError={isSkillsError}
-            data={skillsData?.skillsByLearningHours}
-            onClick={handleChartClick}
-          />
-        </div>
-      </div>
-
       {/* Leaderboard */}
-      <div className="bg-primary-100 rounded-lg container-fluid mb-3">
+      <div className="bg-primary-100 rounded-lg container-fluid mb-3 mt-3">
         <div className="h-100 overflow-hidden">
           <Leaderboard
             startDate={startDate}

src/components/AdvanceAnalyticsV2.0/tabs/Outcomes.jsx

@@ -18,6 +18,8 @@ import EVENT_NAMES from '../../../eventTracking';
 import { get90DayPriorDate } from '../data/utils';
 import { ALL_COURSES, GRANULARITY, CALCULATION } from '../data/constants';
 import { useAllFlexEnterpriseGroups } from '../../learner-credit-management/data';
+import SkillsByEnrollmentChart from '../charts/SkillsByEnrollmentChart';
+import SkillsByLearningHoursChart from '../charts/SkillsByLearningHoursChart';
 
 const Outcomes = ({ enterpriseId }) => {
   const currentDate = new Date().toISOString().split('T')[0];
@@ -144,6 +146,28 @@ const Outcomes = ({ enterpriseId }) => {
         activeTab={ANALYTICS_TABS.OUTCOMES}
       />
 
+      {/* Skills Chart */}
+      <div className="row py-3 gx-4 mb-2">
+        {/* Skills By Enrollment Chart */}
+        <div className="col-6">
+          <SkillsByEnrollmentChart
+            isFetching={isSkillsFetching}
+            isError={isSkillsError}
+            data={skillsData?.topSkillsByEnrollments}
+            onClick={handleChartClick}
+          />
+        </div>
+        {/* Skills By Learning Hours Charts */}
+        <div className="col-6">
+          <SkillsByLearningHoursChart
+            isFetching={isSkillsFetching}
+            isError={isSkillsError}
+            data={skillsData?.skillsByLearningHours}
+            onClick={handleChartClick}
+          />
+        </div>
+      </div>
+
       {/* Top Skills */}
       <TopSkillsChart
         isFetching={isSkillsFetching}