fix: quality

openedx · Sep 3, 2024 · 33f1856 · 33f1856
1 parent aff7d43
commit 33f1856
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 106 deletions.
diff --git a/src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx b/src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx
@@ -25,8 +25,6 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
   const dataRefreshDate = '';
   const intl = useIntl();
 
-  enterpriseId = '5d566680-12a8-4b85-89d8-d9eacbf0f9eb';
-
   return (
     <>
       <Helmet title={PAGE_TITLE} />

diff --git a/src/components/AdvanceAnalyticsV2/data/constants.js b/src/components/AdvanceAnalyticsV2/data/constants.js
@@ -96,4 +96,4 @@ export const skillsTypeColorMap = {
   Certification: '#FE6100',
 };
 
-export const chartColorMap = { "certificate": "#3669C9", "audit": "#06262B" };
+export const chartColorMap = { certificate: '#3669C9', audit: '#06262B' };
diff --git a/src/components/AdvanceAnalyticsV2/data/hooks.js b/src/components/AdvanceAnalyticsV2/data/hooks.js
@@ -14,7 +14,9 @@ export const useEnterpriseAnalyticsData = ({
   currentPage = undefined,
   queryOptions = {},
 }) => {
-  const requestOptions = { startDate, endDate, granularity, calculation, page: currentPage };
+  const requestOptions = {
+    startDate, endDate, granularity, calculation, page: currentPage,
+  };
   return useQuery({
     queryKey: advanceAnalyticsQueryKeys[key](enterpriseCustomerUUID, requestOptions),
     queryFn: () => EnterpriseDataApiService.fetchAdminAnalyticsData(

diff --git a/src/components/AdvanceAnalyticsV2/data/hooks.test.jsx b/src/components/AdvanceAnalyticsV2/data/hooks.test.jsx
@@ -26,12 +26,12 @@ const mockAnalyticsCompletionsChartsData = {
 
 const mockAnalyticsLeaderboardTableData = [
   {
-      "email": "[email protected]",
-      "dailySessions": 243,
-      "learningTimeSeconds": 1111,
-      "learningTimeHours": 3.4,
-      "averageSessionLength": 1.6,
-      "courseCompletions": 4
+    email: '[email protected]',
+    dailySessions: 243,
+    learningTimeSeconds: 1111,
+    learningTimeHours: 3.4,
+    averageSessionLength: 1.6,
+    courseCompletions: 4,
   },
 ];
 
@@ -81,11 +81,12 @@ describe('useEnterpriseAnalyticsData', () => {
       TEST_ENTERPRISE_ID,
       'completions',
       {
-        "calculation": undefined,
-        "endDate": "2021-12-31",
-        "granularity": undefined,
-        "page": undefined,
-        "startDate": "2021-01-01"}
+        calculation: undefined,
+        endDate: '2021-12-31',
+        granularity: undefined,
+        page: undefined,
+        startDate: '2021-01-01',
+      },
     );
     expect(result.current).toEqual(expect.objectContaining({
       isLoading: false,
@@ -127,11 +128,12 @@ describe('useEnterpriseAnalyticsData', () => {
       TEST_ENTERPRISE_ID,
       'completions',
       {
-        "calculation": undefined,
-        "endDate": "2021-12-31",
-        "granularity": undefined,
-        "page": undefined,
-        "startDate": "2021-01-01"}
+        calculation: undefined,
+        endDate: '2021-12-31',
+        granularity: undefined,
+        page: undefined,
+        startDate: '2021-01-01',
+      },
     );
     expect(result.current).toEqual(expect.objectContaining({
       isLoading: false,

diff --git a/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx b/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
@@ -15,7 +15,7 @@ const AnalyticsTable = ({
   enableCSVDownload,
   startDate,
   endDate,
-  enterpriseId
+  enterpriseId,
 }) => {
   const intl = useIntl();
   const [currentPage, setCurrentPage] = useState(0);

diff --git a/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx b/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
@@ -52,13 +52,13 @@ const Completions = ({
           chartType="LineChart"
           chartProps={{
             data: data?.completionsOverTime,
-            xKey: "passedDate",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'passedDate',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
-            xAxisTitle: "",
-            yAxisTitle: "Number of Completions",
-            hovertemplate: "Date: %{x}<br>Number of Completions: %{y}",
+            xAxisTitle: '',
+            yAxisTitle: 'Number of Completions',
+            hovertemplate: 'Date: %{x}<br>Number of Completions: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.completions.tab.chart.top.courses.by.completions.loading.message',
@@ -94,16 +94,16 @@ const Completions = ({
           chartType="BarChart"
           chartProps={{
             data: data?.topCoursesByCompletions,
-            xKey: "courseKey",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'courseKey',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
             yAxisTitle: intl.formatMessage({
               id: 'advance.analytics.completions.tab.chart.top.courses.by.completion.y.axis.title',
               defaultMessage: 'Number of Completions',
               description: 'Y-axis title for the top courses by completions chart.',
             }),
-            hovertemplate: "Course: %{x}<br>Number of Completions: %{y}",
+            hovertemplate: 'Course: %{x}<br>Number of Completions: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.completions.tab.chart.top.10.courses.by.completions.loading.message',
@@ -139,16 +139,16 @@ const Completions = ({
           chartType="BarChart"
           chartProps={{
             data: data?.topSubjectsByCompletions,
-            xKey: "courseSubject",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'courseSubject',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
             yAxisTitle: intl.formatMessage({
               id: 'advance.analytics.completions.tab.chart.top.subjects.by.completion.y.axis.title',
               defaultMessage: 'Number of Completions',
               description: 'Y-axis title for the top subjects by completions chart.',
             }),
-            hovertemplate: "Subject: %{x}<br>Number of Completions: %{y}",
+            hovertemplate: 'Subject: %{x}<br>Number of Completions: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.completions.tab.chart.top.subjects.by.completions.loading.message',
@@ -173,7 +173,7 @@ const Completions = ({
           startDate={startDate}
           endDate={endDate}
           enterpriseId={enterpriseId}
-          enableCSVDownload={true}
+          enableCSVDownload
           tableColumns={[
             {
               Header: intl.formatMessage({

diff --git a/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx
@@ -1,12 +1,14 @@
-import { render, screen, waitFor, within, } from '@testing-library/react';
+import {
+  render, screen, waitFor, within,
+} from '@testing-library/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import Completions from './Completions';
 import '@testing-library/jest-dom';
-import { queryClient } from '../../test/testUtils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import Completions from './Completions';
+import { queryClient } from '../../test/testUtils';
 import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
 
 const mockAnalyticsData = {
@@ -49,7 +51,6 @@ jest.mock('../charts/BarChart', () => {
 
 describe('Completions Component', () => {
   test('renders all charts correctly', async () => {
-
     const { container } = render(
       <QueryClientProvider client={queryClient()}>
         <IntlProvider locale="en">
@@ -61,7 +62,7 @@ describe('Completions Component', () => {
             calculation="Total"
           />
         </IntlProvider>,
-      </QueryClientProvider>
+      </QueryClientProvider>,
     );
 
     const sections = [

diff --git a/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx b/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import EmptyChart from '../charts/EmptyChart';
 import Header from '../Header';
 import { ANALYTICS_TABS, CHART_TYPES, chartColorMap } from '../data/constants';
 import AnalyticsTable from './AnalyticsTable';
@@ -50,13 +49,13 @@ const Engagements = ({
           chartType="LineChart"
           chartProps={{
             data: data?.engagementsOverTime,
-            xKey: "activityDate",
-            yKey: "sum",
-            colorKey: "enrollType",
+            xKey: 'activityDate',
+            yKey: 'sum',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
-            xAxisTitle: "",
-            yAxisTitle: "Number of Learning Hours",
-            hovertemplate: "Date: %{x}<br>Learning Hours: %{y}",
+            xAxisTitle: '',
+            yAxisTitle: 'Number of Learning Hours',
+            hovertemplate: 'Date: %{x}<br>Learning Hours: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.engagements.tab.chart.learning.hours.over.time.loading.message',
@@ -90,16 +89,16 @@ const Engagements = ({
           chartType="BarChart"
           chartProps={{
             data: data?.topCoursesByEngagement,
-            xKey: "courseKey",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'courseKey',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
             yAxisTitle: intl.formatMessage({
               id: 'advance.analytics.engagements.tab.chart.top.10.courses.by.learning.hours.y.axis.title',
               defaultMessage: 'Number of Learning Hours',
               description: 'Y-axis title for the top 10 courses by learning hours chart.',
             }),
-            hovertemplate: "Course: %{x}<br>Learning Hours: %{y}",
+            hovertemplate: 'Course: %{x}<br>Learning Hours: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.engagements.tab.chart.top.10.courses.by.learning.hours.loading.message',
@@ -133,16 +132,16 @@ const Engagements = ({
           chartType="BarChart"
           chartProps={{
             data: data?.topCoursesByEngagement,
-            xKey: "courseSubject",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'courseSubject',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
             yAxisTitle: intl.formatMessage({
               id: 'advance.analytics.engagements.tab.chart.top.10.subjects.by.learning.hours.y.axis.title',
               defaultMessage: 'Number of Learning Hours',
               description: 'Y-axis title for the top 10 subjects by learning hours chart.',
             }),
-            hovertemplate: "Subject: %{x}<br>Learning Hours: %{y}",
+            hovertemplate: 'Subject: %{x}<br>Learning Hours: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.engagements.tab.chart.top.10.subjects.by.learning.hours.loading.message',
@@ -167,7 +166,7 @@ const Engagements = ({
           startDate={startDate}
           endDate={endDate}
           enterpriseId={enterpriseId}
-          enableCSVDownload={true}
+          enableCSVDownload
           tableColumns={[
             {
               Header: intl.formatMessage({
@@ -223,5 +222,7 @@ Engagements.propTypes = {
   startDate: PropTypes.string.isRequired,
   endDate: PropTypes.string.isRequired,
   enterpriseId: PropTypes.string.isRequired,
+  granularity: PropTypes.string.isRequired,
+  calculation: PropTypes.string.isRequired,
 };
 export default Engagements;
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx
@@ -1,12 +1,14 @@
-import { render, screen, waitFor, within, } from '@testing-library/react';
+import {
+  render, screen, waitFor, within,
+} from '@testing-library/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import Engagements from './Engagements';
 import '@testing-library/jest-dom';
-import { queryClient } from '../../test/testUtils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import Engagements from './Engagements';
+import { queryClient } from '../../test/testUtils';
 import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
 
 const mockAnalyticsData = {
@@ -62,7 +64,7 @@ describe('Engagements Component', () => {
             calculation="Total"
           />
         </IntlProvider>,
-      </QueryClientProvider>
+      </QueryClientProvider>,
     );
 
     const sections = [

diff --git a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import EmptyChart from '../charts/EmptyChart';
 import Header from '../Header';
 import { ANALYTICS_TABS, CHART_TYPES, chartColorMap } from '../data/constants';
 import AnalyticsTable from './AnalyticsTable';
@@ -52,13 +51,13 @@ const Enrollments = ({
           chartType="LineChart"
           chartProps={{
             data: data?.enrollmentsOverTime,
-            xKey: "enterpriseEnrollmentDate",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'enterpriseEnrollmentDate',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
-            xAxisTitle: "",
-            yAxisTitle: "Number of Enrollments",
-            hovertemplate: "Date: %{x}<br>Enrolls: %{y}",
+            xAxisTitle: '',
+            yAxisTitle: 'Number of Enrollments',
+            hovertemplate: 'Date: %{x}<br>Enrolls: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.enrollments.tab.chart.enrollments.over.time.loading.message',
@@ -94,13 +93,13 @@ const Enrollments = ({
           chartType="BarChart"
           chartProps={{
             data: data?.topCoursesByEnrollments,
-            xKey: "courseKey",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'courseKey',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
-            xAxisTitle: "",
-            yAxisTitle: "Number of Enrollments",
-            hovertemplate: "Course: %{x}<br>Enrolls: %{y}",
+            xAxisTitle: '',
+            yAxisTitle: 'Number of Enrollments',
+            hovertemplate: 'Course: %{x}<br>Enrolls: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.enrollments.tab.chart.top.courses.by.enrollments.loading.message',
@@ -136,13 +135,13 @@ const Enrollments = ({
           chartType="BarChart"
           chartProps={{
             data: data?.topSubjectsByEnrollments,
-            xKey: "courseSubject",
-            yKey: "count",
-            colorKey: "enrollType",
+            xKey: 'courseSubject',
+            yKey: 'count',
+            colorKey: 'enrollType',
             colorMap: chartColorMap,
-            xAxisTitle: "",
-            yAxisTitle: "Number of Enrollments",
-            hovertemplate: "Subject: %{x}<br>Enrolls: %{y}",
+            xAxisTitle: '',
+            yAxisTitle: 'Number of Enrollments',
+            hovertemplate: 'Subject: %{x}<br>Enrolls: %{y}',
           }}
           loadingMessage={intl.formatMessage({
             id: 'advance.analytics.enrollments.tab.chart.top.subjects.by.enrollments.loading.message',
@@ -167,7 +166,7 @@ const Enrollments = ({
           startDate={startDate}
           endDate={endDate}
           enterpriseId={enterpriseId}
-          enableCSVDownload={true}
+          enableCSVDownload
           tableColumns={[
             {
               Header: intl.formatMessage({