From 5235e2556ef8bd0b8edef5e3e6b97c79d5fa972c Mon Sep 17 00:00:00 2001
From: Saleem Latif <saleem.latif.ee@gmail.com>
Date: Tue, 10 Sep 2024 17:39:44 +0500
Subject: [PATCH] feat: Moved enrollments charts to new API endpoint.

---
 .../AdvanceAnalyticsV2/AnalyticsV2Page.jsx    |  17 +-
 .../AdvanceAnalyticsV2/DownloadCSVButton.jsx  | 101 +++++++++
 .../DownloadCSVButton.test.jsx                |  68 ++++++
 src/components/AdvanceAnalyticsV2/Header.jsx  |  28 +--
 .../charts/ChartWrapper.jsx                   |   2 +-
 .../AdvanceAnalyticsV2/data/constants.js      |  16 +-
 .../data/{hooks.js => hooks/index.js}         |   9 +-
 .../hooks/useEnterpriseEnrollmentsData.js     |  91 ++++++++
 .../AdvanceAnalyticsV2/data/utils.js          | 128 ++++++++++-
 .../AdvanceAnalyticsV2/data/utils.test.js     | 203 ++++++++++++++++++
 .../tabs/AnalyticsTable.jsx                   |  41 ++--
 .../AdvanceAnalyticsV2/tabs/Completions.jsx   |  58 ++---
 .../tabs/Completions.test.jsx                 |  49 +++--
 .../AdvanceAnalyticsV2/tabs/Engagements.jsx   |  52 +++--
 .../tabs/Engagements.test.jsx                 |  49 +++--
 .../AdvanceAnalyticsV2/tabs/Enrollments.jsx   |  99 ++++++---
 .../tabs/Enrollments.test.jsx                 |  49 +++--
 .../tabs/Leaderboard.test.jsx                 |  41 ++--
 .../AdvanceAnalyticsV2/tabs/Skills.jsx        |  16 +-
 .../tests/AnalyticsV2Page.test.jsx            |  17 +-
 src/data/services/EnterpriseDataApiService.js |  12 ++
 21 files changed, 923 insertions(+), 223 deletions(-)
 create mode 100644 src/components/AdvanceAnalyticsV2/DownloadCSVButton.jsx
 create mode 100644 src/components/AdvanceAnalyticsV2/DownloadCSVButton.test.jsx
 rename src/components/AdvanceAnalyticsV2/data/{hooks.js => hooks/index.js} (87%)
 create mode 100644 src/components/AdvanceAnalyticsV2/data/hooks/useEnterpriseEnrollmentsData.js
 create mode 100644 src/components/AdvanceAnalyticsV2/data/utils.test.js

diff --git a/src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx b/src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx
index 4348b020c1..8ff1df8bd0 100644
--- a/src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx
+++ b/src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx
@@ -14,6 +14,7 @@ import Completions from './tabs/Completions';
 import Leaderboard from './tabs/Leaderboard';
 import Skills from './tabs/Skills';
 import { useEnterpriseAnalyticsAggregatesData } from './data/hooks';
+import { GRANULARITY, CALCULATION } from './data/constants';
 
 const PAGE_TITLE = 'AnalyticsV2';
 
@@ -96,28 +97,28 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
                 value={granularity}
                 onChange={(e) => setGranularity(e.target.value)}
               >
-                <option value="Daily">
+                <option value={GRANULARITY.DAILY}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.granularity.option.daily',
                     defaultMessage: 'Daily',
                     description: 'Advance analytics granularity filter daily option',
                   })}
                 </option>
-                <option value="Weekly">
+                <option value={GRANULARITY.WEEKLY}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.granularity.option.weekly',
                     defaultMessage: 'Weekly',
                     description: 'Advance analytics granularity filter weekly option',
                   })}
                 </option>
-                <option value="Monthly">
+                <option value={GRANULARITY.MONTHLY}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.granularity.option.monthly',
                     defaultMessage: 'Monthly',
                     description: 'Advance analytics granularity filter monthly option',
                   })}
                 </option>
-                <option value="Quarterly">
+                <option value={GRANULARITY.QUARTERLY}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.granularity.option.quarterly',
                     defaultMessage: 'Quarterly',
@@ -141,28 +142,28 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
                 value={calculation}
                 onChange={(e) => setCalculation(e.target.value)}
               >
-                <option value="Total">
+                <option value={CALCULATION.TOTAL}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.calculation.option.total',
                     defaultMessage: 'Total',
                     description: 'Advance analytics calculation filter total option',
                   })}
                 </option>
-                <option value="Running Total">
+                <option value={CALCULATION.RUNNING_TOTAL}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.calculation.option.running.total',
                     defaultMessage: 'Running Total',
                     description: 'Advance analytics calculation filter running total option',
                   })}
                 </option>
-                <option value="Moving Average (3 Period)">
+                <option value={CALCULATION.MOVING_AVERAGE_3_PERIODS}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.calculation.option.average.3',
                     defaultMessage: 'Moving Average (3 Period)',
                     description: 'Advance analytics calculation filter moving average 3 period option',
                   })}
                 </option>
-                <option value="Moving Average (7 Period)">
+                <option value={CALCULATION.MOVING_AVERAGE_7_PERIODS}>
                   {intl.formatMessage({
                     id: 'advance.analytics.filter.calculation.option.average.7',
                     defaultMessage: 'Moving Average (7 Period)',
diff --git a/src/components/AdvanceAnalyticsV2/DownloadCSVButton.jsx b/src/components/AdvanceAnalyticsV2/DownloadCSVButton.jsx
new file mode 100644
index 0000000000..e19687b6fc
--- /dev/null
+++ b/src/components/AdvanceAnalyticsV2/DownloadCSVButton.jsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { saveAs } from 'file-saver';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import {
+  Toast, StatefulButton, Icon, Spinner, useToggle,
+} from '@openedx/paragon';
+import { Download, Check, Close } from '@openedx/paragon/icons';
+
+const DownloadCSVButton = ({
+  jsonData, csvFileName,
+}) => {
+  const [buttonState, setButtonState] = useState('disabled');
+  const [isToastShowing, showToast, hideToast] = useToggle(false);
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (jsonData.length > 0) {
+      setButtonState('default');
+    }
+  }, [jsonData]);
+
+  const jsonToCSV = (json) => {
+    const fields = Object.keys(json[0]);
+    const replacer = (key, value) => (value === null ? '' : value);
+    const csv = json.map(
+      (row) => fields.map(
+        (fieldName) => JSON.stringify(row[fieldName], replacer),
+      ).join(','),
+    );
+    csv.unshift(fields.join(',')); // add header column
+    return csv.join('\r\n');
+  };
+
+  const downloadCsv = () => {
+    setButtonState('pending');
+    const csv = jsonToCSV(jsonData);
+    const blob = new Blob([csv], { type: 'text/csv' });
+    saveAs(blob, csvFileName);
+    showToast();
+    setButtonState('complete');
+  };
+
+  const toastText = intl.formatMessage({
+    id: 'adminPortal.LPRV2.downloadCSV.toast',
+    defaultMessage: 'CSV Downloaded',
+    description: 'Toast message for the download button in the LPR V2 page.',
+  });
+  return (
+    <div className="d-flex justify-content-end">
+      { isToastShowing
+     && (
+     <Toast onClose={hideToast} show={showToast}>
+       {toastText}
+     </Toast>
+     )}
+      <StatefulButton
+        state={buttonState}
+        variant={buttonState === 'error' ? 'danger' : 'primary'}
+        data-testid="plotly-charts-download-csv-button"
+        disabledStates={['disabled', 'pending']}
+        labels={{
+          default: intl.formatMessage({
+            id: 'adminPortal.LPRV2.downloadCSV.button.default',
+            defaultMessage: 'Download CSV',
+            description: 'Label for the download button in the module activity report page.',
+          }),
+          pending: intl.formatMessage({
+            id: 'adminPortal.LPRV2.downloadCSV.button.pending',
+            defaultMessage: 'Downloading CSV',
+            description: 'Label for the download button in the module activity report page when the download is in progress.',
+          }),
+          complete: intl.formatMessage({
+            id: 'adminPortal.LPRV2.downloadCSV.button.complete',
+            defaultMessage: 'CSV Downloaded',
+            description: 'Label for the download button in the module activity report page when the download is complete.',
+          }),
+          error: intl.formatMessage({
+            id: 'adminPortal.LPRV2.downloadCSV.button.error',
+            defaultMessage: 'Error',
+            description: 'Label for the download button in the module activity report page when the download fails.',
+          }),
+        }}
+        icons={{
+          default: <Icon src={Download} />,
+          pending: <Spinner animation="border" variant="light" size="sm" />,
+          complete: <Icon src={Check} />,
+          error: <Icon src={Close} variant="light" size="sm" />,
+        }}
+        onClick={downloadCsv}
+      />
+    </div>
+  );
+};
+
+DownloadCSVButton.propTypes = {
+  jsonData: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  csvFileName: PropTypes.string.isRequired,
+};
+
+export default DownloadCSVButton;
diff --git a/src/components/AdvanceAnalyticsV2/DownloadCSVButton.test.jsx b/src/components/AdvanceAnalyticsV2/DownloadCSVButton.test.jsx
new file mode 100644
index 0000000000..22718f85ae
--- /dev/null
+++ b/src/components/AdvanceAnalyticsV2/DownloadCSVButton.test.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { saveAs } from 'file-saver';
+import DownloadCSVButton from './DownloadCSVButton';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  ...jest.requireActual('@edx/frontend-platform/logging'),
+  logError: jest.fn(),
+}));
+const mockJsonData = [
+  { date: '2024-01-01', count: 10, enroll_type: 'verified' },
+  { date: '2024-01-02', count: 20, enroll_type: 'certificate' },
+  { date: '2024-01-03', count: 30, enroll_type: 'verified' },
+  { date: '2024-01-04', count: 40, enroll_type: 'audit' },
+  { date: '2024-01-05', count: 50, enroll_type: 'verified' },
+  { date: '2024-01-06', count: 60, enroll_type: 'verified' },
+  { date: '2024-01-07', count: 70, enroll_type: 'certificate' },
+  { date: '2024-01-08', count: 80, enroll_type: 'verified' },
+  { date: '2024-01-09', count: 90, enroll_type: 'certificate' },
+  { date: '2024-01-10', count: 100, enroll_type: 'certificate' },
+];
+let mockJsonAsCSV = 'date,count,enroll_type\n';
+for (let i = 0; i < mockJsonData.length; i++) {
+  mockJsonAsCSV += `${mockJsonData[i].date},${mockJsonData[i].count},${mockJsonData[i].enroll_type}\n`;
+}
+
+const DEFAULT_PROPS = {
+  jsonData: mockJsonData,
+  csvFileName: 'completions.csv',
+};
+describe('DownloadCSVButton', () => {
+  const flushPromises = () => new Promise(setImmediate);
+
+  it('renders download csv button correctly', async () => {
+    render(
+      <IntlProvider locale="en">
+        <DownloadCSVButton {...DEFAULT_PROPS} />
+      </IntlProvider>,
+    );
+
+    expect(screen.getByTestId('plotly-charts-download-csv-button')).toBeInTheDocument();
+  });
+
+  it('handles successful CSV download', async () => {
+    render(
+      <IntlProvider locale="en">
+        <DownloadCSVButton {...DEFAULT_PROPS} />
+      </IntlProvider>,
+    );
+
+    // Click the download button.
+    userEvent.click(screen.getByTestId('plotly-charts-download-csv-button'));
+    await flushPromises();
+
+    expect(saveAs).toHaveBeenCalledWith(
+      new Blob([mockJsonAsCSV], { type: 'text/csv' }),
+      'completions.csv',
+    );
+  });
+});
diff --git a/src/components/AdvanceAnalyticsV2/Header.jsx b/src/components/AdvanceAnalyticsV2/Header.jsx
index c9f5a13264..a78e02087e 100644
--- a/src/components/AdvanceAnalyticsV2/Header.jsx
+++ b/src/components/AdvanceAnalyticsV2/Header.jsx
@@ -1,50 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DownloadCSV from './DownloadCSV';
 
 const Header = ({
-  title, subtitle, startDate, endDate, isDownloadCSV, activeTab, granularity, calculation, chartType, enterpriseId,
+  title, subtitle, DownloadCSVComponent,
 }) => (
   <div className="analytics-header d-flex justify-content-between row">
     <div className="col-8">
       <h2 className="analytics-header-title">{title}</h2>
       {subtitle && <p className="analytics-header-subtitle">{subtitle}</p>}
     </div>
-    {isDownloadCSV && (
     <div className="col-3 mr-0">
-      <DownloadCSV
-        enterpriseId={enterpriseId}
-        startDate={startDate}
-        endDate={endDate}
-        activeTab={activeTab}
-        granularity={granularity}
-        calculation={calculation}
-        chartType={chartType}
-      />
+      {DownloadCSVComponent}
     </div>
-    )}
   </div>
 );
 
 Header.defaultProps = {
   subtitle: undefined,
-  isDownloadCSV: false,
-  granularity: 'Daily',
-  calculation: 'Total',
-  chartType: '',
 };
 
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
-  isDownloadCSV: PropTypes.bool,
-  startDate: PropTypes.string.isRequired,
-  endDate: PropTypes.string.isRequired,
-  activeTab: PropTypes.string.isRequired,
-  enterpriseId: PropTypes.string.isRequired,
-  chartType: PropTypes.string,
-  granularity: PropTypes.string,
-  calculation: PropTypes.string,
+  DownloadCSVComponent: PropTypes.element.isRequired,
 };
 
 export default Header;
diff --git a/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx b/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx
index e41c0454c0..ea753ed2a4 100644
--- a/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx
+++ b/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx
@@ -42,7 +42,7 @@ ChartWrapper.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   isError: PropTypes.bool.isRequired,
   chartType: PropTypes.oneOf(['ScatterChart', 'LineChart', 'BarChart']).isRequired,
-  chartProps: PropTypes.object.isRequired,
+  chartProps: PropTypes.shape({ data: PropTypes.shape({}) }).isRequired,
   loadingMessage: PropTypes.string.isRequired,
 };
 
diff --git a/src/components/AdvanceAnalyticsV2/data/constants.js b/src/components/AdvanceAnalyticsV2/data/constants.js
index 846daefa15..bb0a88a39a 100644
--- a/src/components/AdvanceAnalyticsV2/data/constants.js
+++ b/src/components/AdvanceAnalyticsV2/data/constants.js
@@ -43,7 +43,7 @@ export const analyticsDataTableKeys = {
 
 const analyticsDefaultKeys = ['admin-analytics'];
 
-const generateKey = (key, enterpriseUUID, requestOptions) => [
+export const generateKey = (key, enterpriseUUID, requestOptions) => [
   ...analyticsDefaultKeys,
   key,
   enterpriseUUID,
@@ -100,3 +100,17 @@ export const skillsTypeColorMap = {
 };
 
 export const chartColorMap = { certificate: '#3669C9', audit: '#06262B' };
+
+export const GRANULARITY = {
+  DAILY: 'day',
+  WEEKLY: 'week',
+  MONTHLY: 'month',
+  QUARTERLY: 'quarter',
+  YEARLY: 'year',
+};
+export const CALCULATION = {
+  TOTAL: 'total',
+  RUNNING_TOTAL: 'running-total',
+  MOVING_AVERAGE_3_PERIODS: 'moving-average-3-period',
+  MOVING_AVERAGE_7_PERIODS: 'moving-average-7-period',
+};
diff --git a/src/components/AdvanceAnalyticsV2/data/hooks.js b/src/components/AdvanceAnalyticsV2/data/hooks/index.js
similarity index 87%
rename from src/components/AdvanceAnalyticsV2/data/hooks.js
rename to src/components/AdvanceAnalyticsV2/data/hooks/index.js
index 4e710e4def..7ed4168863 100644
--- a/src/components/AdvanceAnalyticsV2/data/hooks.js
+++ b/src/components/AdvanceAnalyticsV2/data/hooks/index.js
@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
-import { advanceAnalyticsQueryKeys } from './constants';
-import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
+import { advanceAnalyticsQueryKeys } from '../constants';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+export { default as useEnterpriseEnrollmentsData } from './useEnterpriseEnrollmentsData';
 
 export const useEnterpriseAnalyticsData = ({
   enterpriseCustomerUUID,
@@ -12,10 +14,11 @@ export const useEnterpriseAnalyticsData = ({
   granularity = undefined,
   calculation = undefined,
   currentPage = undefined,
+  pageSize = undefined,
   queryOptions = {},
 }) => {
   const requestOptions = {
-    startDate, endDate, granularity, calculation, page: currentPage,
+    startDate, endDate, granularity, calculation, page: currentPage, pageSize,
   };
   return useQuery({
     queryKey: advanceAnalyticsQueryKeys[key](enterpriseCustomerUUID, requestOptions),
diff --git a/src/components/AdvanceAnalyticsV2/data/hooks/useEnterpriseEnrollmentsData.js b/src/components/AdvanceAnalyticsV2/data/hooks/useEnterpriseEnrollmentsData.js
new file mode 100644
index 0000000000..8c457a831e
--- /dev/null
+++ b/src/components/AdvanceAnalyticsV2/data/hooks/useEnterpriseEnrollmentsData.js
@@ -0,0 +1,91 @@
+import { useQuery } from '@tanstack/react-query';
+import _ from 'lodash';
+
+import { useMemo } from 'react';
+import { ANALYTICS_TABS, generateKey } from '../constants';
+import { applyGranularity, applyCalculation } from '../utils';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+/**
+  Applies data transformations to the response data.
+
+  Apply transformations to the response data based on the granularity and calculation. Data transformation is applied
+  only on the items with the allowed enrollment types.
+
+ * @param {object} response - The response data returned from the API.
+ * @param {OpUnitType} granularity - Granularity of the data. e.g. `day`, `week`, `month`, `quarter`, `year`.
+ * @param {String} calculation - Calculation to apply on the data. e.g.
+ *  `total`, `running_total`, `moving_average_3_periods`, `moving_average_7_periods`.
+ * @param {Array} allowedEnrollTypes - Allowed enrollment types to consider. e.g. [`certificate`, `audit`].
+ */
+const applyDataTransformations = (response, granularity, calculation, allowedEnrollTypes = ['certificate', 'audit']) => {
+  const modifiedResponse = _.cloneDeep(response);
+  if (modifiedResponse?.data?.enrollmentsOverTime) {
+    let enrollmentsOverTime = [];
+    for (let i = 0; i < allowedEnrollTypes.length; i++) {
+      const data = applyGranularity(
+        modifiedResponse.data.enrollmentsOverTime.filter(
+          enrollment => enrollment.enrollType === allowedEnrollTypes[i],
+        ),
+        'enterpriseEnrollmentDate',
+        'enrollmentCount',
+        granularity,
+      );
+      enrollmentsOverTime = enrollmentsOverTime.concat(
+        applyCalculation(data, 'enrollmentCount', calculation),
+      );
+    }
+
+    modifiedResponse.data.enrollmentsOverTime = enrollmentsOverTime;
+  }
+
+  return modifiedResponse;
+};
+
+/**
+  Fetches enterprise enrollments data.
+
+ *  @param {String} enterpriseCustomerUUID - UUID of the enterprise customer.
+ *  @param {Date} startDate - Start date for the data.
+ *  @param {Date} endDate - End date for the data.
+ *  @param {OpUnitType} granularity - Granularity of the data. e.g. `day`, `week`, `month`, `quarter`, `year`.
+ *  @param {String} calculation - Calculation to apply on the data. e.g.
+ *    `total`, `running_total`, `moving_average_3_periods`, `moving_average_7_periods`.
+ *  @param {Number} currentPage - Current page number.
+ *  @param {Number} pageSize - Number of items per page.
+ *  @param {object} queryOptions - Additional options for the query.
+ */
+const useEnterpriseEnrollmentsData = ({
+  enterpriseCustomerUUID,
+  startDate,
+  endDate,
+  granularity = undefined,
+  calculation = undefined,
+  currentPage = undefined,
+  pageSize = undefined,
+  queryOptions = {},
+}) => {
+  const requestOptions = {
+    startDate, endDate, page: currentPage, pageSize,
+  };
+  const response = useQuery({
+    queryKey: generateKey('enrollments', enterpriseCustomerUUID, requestOptions),
+    queryFn: () => EnterpriseDataApiService.fetchAdminAnalyticsData(
+      enterpriseCustomerUUID,
+      ANALYTICS_TABS.ENROLLMENTS,
+      requestOptions,
+    ),
+    staleTime: 0.5 * (1000 * 60 * 60), // 30 minutes. The time in milliseconds after data is considered stale.
+    cacheTime: 0.75 * (1000 * 60 * 60), // 45 minutes. Cache data will be garbage collected after this duration.
+    keepPreviousData: true,
+    ...queryOptions,
+  });
+
+  return useMemo(() => applyDataTransformations(
+    response,
+    granularity,
+    calculation,
+  ), [response, granularity, calculation]);
+};
+
+export default useEnterpriseEnrollmentsData;
diff --git a/src/components/AdvanceAnalyticsV2/data/utils.js b/src/components/AdvanceAnalyticsV2/data/utils.js
index d7bfb0250d..dc3e55980e 100644
--- a/src/components/AdvanceAnalyticsV2/data/utils.js
+++ b/src/components/AdvanceAnalyticsV2/data/utils.js
@@ -1,4 +1,11 @@
-import { CHART_TYPES } from './constants';
+import dayjs from 'dayjs';
+import { sum } from 'lodash';
+import utc from 'dayjs/plugin/utc';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { CHART_TYPES, CALCULATION } from './constants';
+
+dayjs.extend(utc);
+dayjs.extend(quarterOfYear);
 
 const simulateURL = (activeTab, chartType) => {
   if (!Object.values(CHART_TYPES).includes(chartType)) {
@@ -8,3 +15,122 @@ const simulateURL = (activeTab, chartType) => {
 };
 
 export default simulateURL;
+
+/**
+Apply granularity on the given data.
+
+Given data `timeSeriesData` should be a list of objects with date and count keys.
+Date entry should be against the given `dateKey` and count entry should be against the given `countKey`.
+`granularity` should be one of the following values: 'day', 'week', 'month', 'quarter', 'year'.
+
+ e.g. If granularity is 'week', the data will be grouped by week. It will do so by
+ 1. picking first element of the data.
+ 2. pick the subsequent entries that have the same `week` as the item from Point#1 and accumulate the count.
+ 3. If the week is different, add the accumulated count to the modified data and start accumulating for the new week.
+
+  @param {Array} timeSeriesData - List of objects with date and count keys.
+  @param {String} dateKey - Key to access the date entry in the given data.
+  @param {String} countKey - Key to access the count entry in the given data.
+  @param {OpUnitType} granularity - Granularity to apply on the given data.
+*/
+export const applyGranularity = (timeSeriesData, dateKey, countKey, granularity) => {
+  if (timeSeriesData.length <= 1) {
+    return timeSeriesData;
+  }
+  const modifiedData = [];
+  let modifiedEntry = timeSeriesData[0];
+  // Apply granularity on the given data.
+  for (let i = 1; i < timeSeriesData.length; i++) {
+    const item = timeSeriesData[i];
+    const dateEntry = item[dateKey];
+    const countEntry = item[countKey];
+    const modifiedDate = modifiedEntry[dateKey];
+
+    // If start-of value for the iteration is same as the start-of value for the modified entry, add the count.
+    if (dayjs.utc(dateEntry).startOf(granularity).isSame(dayjs.utc(modifiedDate).startOf(granularity))) {
+      modifiedEntry[countKey] += countEntry;
+    } else {
+      modifiedData.push(modifiedEntry);
+      modifiedEntry = item;
+    }
+  }
+  modifiedData.push(modifiedEntry);
+  return modifiedData;
+};
+
+/**
+Calculate moving average for the given time series data.
+
+period will denote the number of periods to consider for the moving average calculation.
+e.g. 3 would mean 3-day moving average.
+
+ For a 3-period moving average, the calculation will be as follows:
+  1. First item will be the same as the original data.
+  2. Second item will be the average of the first 2 items.
+  3. Third item will be the average of the first 3 items.
+  4. And so on...
+
+  @param {Array} timeSeriesData - List of objects with date and count keys.
+  @param {String} countKey - Key to access the count entry in the given data.
+  @param {Number} period - Number of periods to consider for the moving average calculation.
+*/
+const calculateMovingAverage = (timeSeriesData, countKey, period) => {
+  const modifiedData = [];
+  for (let i = 0; i < timeSeriesData.length; i++) {
+    // Set start to 0 for the first `N` entries where `N` is the `period`.
+    const start = i < period ? 0 : (i - period + 1);
+    const end = i + 1;
+
+    // Calculate moving average for the given period.
+    const arraySlice = timeSeriesData.slice(start, end).map((item) => item[countKey]);
+    const movingAverage = sum(arraySlice) / arraySlice.length;
+    modifiedData.push({ ...timeSeriesData[i], [countKey]: movingAverage });
+  }
+  return modifiedData;
+};
+
+/**
+Apply calculation on the given time series data.
+
+calculation should be one of the following values:
+  'total', 'running_total', 'moving_average_3_periods', 'moving_average_7_periods'.
+
+  e.g. If calculation is 'running_total', the data will be modified to have a running total.
+  It will do so by:
+  1. Start with 0.
+  2. Add the count of the first element and insert it in the modified data.
+  3. Add the count of the second element to the total and insert it in the modified data.
+  4. And so on...
+
+  @param {Array} timeSeriesData - List of objects with date and count keys.
+  @param {String} countKey - Key to access the count entry in the given data.
+  @param {String} calculation - Calculation to apply on the given data.
+*/
+export const applyCalculation = (timeSeriesData, countKey, calculation) => {
+  // Noting to do if calculation is TOTAL.
+  if (calculation === CALCULATION.TOTAL) {
+    return timeSeriesData;
+  }
+
+  // Apply running total calculation
+  if (calculation === CALCULATION.RUNNING_TOTAL) {
+    let runningTotal = 0;
+    const modifiedData = [];
+    for (let i = 0; i < timeSeriesData.length; i++) {
+      runningTotal += timeSeriesData[i][countKey];
+      modifiedData.push({ ...timeSeriesData[i], [countKey]: runningTotal });
+    }
+    return modifiedData;
+  }
+
+  // Apply moving average calculation
+  if (calculation === CALCULATION.MOVING_AVERAGE_3_PERIODS) {
+    return calculateMovingAverage(timeSeriesData, countKey, 3);
+  }
+  if (calculation === CALCULATION.MOVING_AVERAGE_7_PERIODS) {
+    return calculateMovingAverage(timeSeriesData, countKey, 7);
+  }
+
+  // If no calculation is applied,
+  return timeSeriesData;
+};
diff --git a/src/components/AdvanceAnalyticsV2/data/utils.test.js b/src/components/AdvanceAnalyticsV2/data/utils.test.js
new file mode 100644
index 0000000000..9ae642a8e9
--- /dev/null
+++ b/src/components/AdvanceAnalyticsV2/data/utils.test.js
@@ -0,0 +1,203 @@
+// Jest test for utils.js
+
+import { applyCalculation, applyGranularity } from './utils';
+import { CALCULATION, GRANULARITY } from './constants';
+
+describe('utils', () => {
+  describe('applyCalculation', () => {
+    it('should calculate moving average correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+      ];
+      const result = applyCalculation(sampleData, 'count', CALCULATION.MOVING_AVERAGE_3_PERIODS);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 15 },
+        { date: '2024-01-03', count: 20 },
+        { date: '2024-01-04', count: 30 },
+        { date: '2024-01-05', count: 40 },
+      ]);
+    });
+    it('should calculate moving average over 7 periods correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ];
+      const result = applyCalculation(sampleData, 'count', CALCULATION.MOVING_AVERAGE_7_PERIODS);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 15 },
+        { date: '2024-01-03', count: 20 },
+        { date: '2024-01-04', count: 25 },
+        { date: '2024-01-05', count: 30 },
+        { date: '2024-01-06', count: 35 },
+        { date: '2024-01-07', count: 40 },
+        { date: '2024-01-08', count: 50 },
+        { date: '2024-01-09', count: 60 },
+        { date: '2024-01-10', count: 70 },
+      ]);
+    });
+    it('should calculate total correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ];
+      const result = applyCalculation(sampleData, 'count', CALCULATION.TOTAL);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ]);
+    });
+    it('should calculate running total correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ];
+      const result = applyCalculation(sampleData, 'count', CALCULATION.RUNNING_TOTAL);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 30 },
+        { date: '2024-01-03', count: 60 },
+        { date: '2024-01-04', count: 100 },
+        { date: '2024-01-05', count: 150 },
+        { date: '2024-01-06', count: 210 },
+        { date: '2024-01-07', count: 280 },
+        { date: '2024-01-08', count: 360 },
+        { date: '2024-01-09', count: 450 },
+        { date: '2024-01-10', count: 550 },
+      ]);
+    });
+  });
+  describe('applyGranularity', () => {
+    it('should apply daily granularity correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ];
+      const result = applyGranularity(sampleData, 'date', 'count', GRANULARITY.DAILY);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ]);
+    });
+    it('should apply weekly granularity correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-01-05', count: 50 },
+        { date: '2024-01-06', count: 60 },
+        { date: '2024-01-07', count: 70 },
+        { date: '2024-01-08', count: 80 },
+        { date: '2024-01-09', count: 90 },
+        { date: '2024-01-10', count: 100 },
+      ];
+      const result = applyGranularity(sampleData, 'date', 'count', GRANULARITY.WEEKLY);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 210 },
+        { date: '2024-01-07', count: 340 },
+      ]);
+    });
+    it('should apply monthly granularity correctly', () => {
+      const sampleData = [
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-01-02', count: 20 },
+        { date: '2024-01-03', count: 30 },
+        { date: '2024-01-04', count: 40 },
+        { date: '2024-02-05', count: 50 },
+        { date: '2024-02-06', count: 60 },
+        { date: '2024-02-07', count: 70 },
+        { date: '2024-02-08', count: 80 },
+        { date: '2024-03-09', count: 90 },
+        { date: '2024-03-10', count: 100 },
+      ];
+      const result = applyGranularity(sampleData, 'date', 'count', GRANULARITY.MONTHLY);
+      expect(result).toEqual([
+        { date: '2024-01-01', count: 100 },
+        { date: '2024-02-05', count: 260 },
+        { date: '2024-03-09', count: 190 },
+      ]);
+    });
+    it('should apply quarterly granularity correctly', () => {
+      const sampleData = [
+        { date: '2023-11-01', count: 5 },
+        { date: '2024-01-01', count: 10 },
+        { date: '2024-02-02', count: 20 },
+        { date: '2024-03-03', count: 30 },
+        { date: '2024-04-04', count: 40 },
+        { date: '2024-05-05', count: 50 },
+        { date: '2024-06-06', count: 60 },
+        { date: '2024-07-07', count: 70 },
+        { date: '2024-08-08', count: 80 },
+        { date: '2024-09-09', count: 90 },
+        { date: '2024-10-10', count: 100 },
+        { date: '2024-11-10', count: 100 },
+        { date: '2024-12-10', count: 100 },
+        { date: '2025-01-10', count: 100 },
+        { date: '2025-02-10', count: 100 },
+      ];
+      const result = applyGranularity(sampleData, 'date', 'count', GRANULARITY.QUARTERLY);
+      expect(result).toEqual([
+        { date: '2023-11-01', count: 5 },
+        { date: '2024-01-01', count: 60 },
+        { date: '2024-04-04', count: 150 },
+        { date: '2024-07-07', count: 240 },
+        { date: '2024-10-10', count: 300 },
+        { date: '2025-01-10', count: 200 },
+      ]);
+    });
+  });
+});
diff --git a/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx b/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
index ae34b94635..1ca1c59626 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
@@ -1,24 +1,27 @@
 import React, { useState, useCallback } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { DataTable, TablePaginationMinimal } from '@openedx/paragon';
+import { DataTable, Icon } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import { Download } from '@openedx/paragon/icons';
 import Header from '../Header';
 import { analyticsDataTableKeys } from '../data/constants';
 
 import { useEnterpriseAnalyticsData, usePaginatedData } from '../data/hooks';
+import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
 
 const AnalyticsTable = ({
   name,
   tableColumns,
   tableTitle,
   tableSubtitle,
-  enableCSVDownload,
   startDate,
   endDate,
   enterpriseId,
 }) => {
   const intl = useIntl();
   const [currentPage, setCurrentPage] = useState(0);
+  const pageSize = 50;
 
   const {
     isFetching, data,
@@ -29,8 +32,18 @@ const AnalyticsTable = ({
     endDate,
     // pages index from 1 in backend, frontend components index from 0
     currentPage: currentPage + 1,
+    pageSize,
   });
 
+  const CSVDownloadURL = EnterpriseDataApiService.getAnalyticsCSVDownloadURL(
+    analyticsDataTableKeys[name],
+    enterpriseId,
+    {
+      start_date: startDate,
+      end_date: endDate,
+    },
+  );
+
   const fetchData = useCallback(
     (args) => {
       if (args.pageIndex !== currentPage) {
@@ -48,18 +61,23 @@ const AnalyticsTable = ({
         <Header
           title={tableTitle}
           subtitle={tableSubtitle}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={name}
-          enterpriseId={enterpriseId}
-          isDownloadCSV={enableCSVDownload}
+          DownloadCSVComponent={(
+            <Link to={CSVDownloadURL} target="_blank" className="btn btn-sm btn-outline-primary ml-0 ml-md-3 mr-3">
+              <Icon src={Download} className="mr-2" />
+              <FormattedMessage
+                id="adminPortal.AnalyticsV2.downloadCSV.button"
+                defaultMessage="Download Enrollments CSV"
+                description="Button to download the enrollments CSV file."
+              />
+            </Link>
+          )}
         />
         <DataTable
           isLoading={isFetching}
           isPaginated
           manualPagination
           initialState={{
-            pageSize: 50,
+            pageSize,
             pageIndex: 0,
           }}
           itemCount={paginatedData.itemCount}
@@ -77,9 +95,7 @@ const AnalyticsTable = ({
               description: 'Message displayed when the table has no data.',
             })}
           />
-          <DataTable.TableFooter>
-            <TablePaginationMinimal />
-          </DataTable.TableFooter>
+          <DataTable.TableFooter />
         </DataTable>
       </div>
     </div>
@@ -91,7 +107,6 @@ AnalyticsTable.propTypes = {
   tableColumns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   tableTitle: PropTypes.string.isRequired,
   tableSubtitle: PropTypes.string.isRequired,
-  enableCSVDownload: PropTypes.bool.isRequired,
   enterpriseId: PropTypes.string.isRequired,
   startDate: PropTypes.string.isRequired,
   endDate: PropTypes.string.isRequired,
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx b/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
index 58a02fbdbe..ecdfcd2907 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
@@ -6,6 +6,7 @@ import { ANALYTICS_TABS, CHART_TYPES, chartColorMap } from '../data/constants';
 import AnalyticsTable from './AnalyticsTable';
 import ChartWrapper from '../charts/ChartWrapper';
 import { useEnterpriseAnalyticsData } from '../data/hooks';
+import DownloadCSV from '../DownloadCSV';
 
 const Completions = ({
   startDate, endDate, granularity, calculation, enterpriseId,
@@ -37,14 +38,17 @@ const Completions = ({
             defaultMessage: 'See the course completions that result in a passing grade over time.',
             description: 'Subtitle for the completions over time chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.COMPLETIONS}
-          granularity={granularity}
-          calculation={calculation}
-          chartType={CHART_TYPES.COMPLETIONS_OVER_TIME}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.COMPLETIONS}
+              granularity={granularity}
+              calculation={calculation}
+              chartType={CHART_TYPES.COMPLETIONS_OVER_TIME}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -79,14 +83,17 @@ const Completions = ({
             defaultMessage: 'See the courses in which your learners are most often achieving a passing grade.',
             description: 'Subtitle for the top 10 courses by completions chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.COMPLETIONS}
-          granularity={granularity}
-          calculation={calculation}
-          chartType={CHART_TYPES.TOP_COURSES_BY_COMPLETIONS}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.COMPLETIONS}
+              granularity={granularity}
+              calculation={calculation}
+              chartType={CHART_TYPES.TOP_COURSES_BY_COMPLETIONS}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -124,14 +131,17 @@ const Completions = ({
             defaultMessage: 'See the subjects your learners are most often achieving a passing grade.',
             description: 'Subtitle for the top 10 subjects by completion chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.COMPLETIONS}
-          granularity={granularity}
-          calculation={calculation}
-          chartType={CHART_TYPES.TOP_SUBJECTS_BY_COMPLETIONS}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.COMPLETIONS}
+              granularity={granularity}
+              calculation={calculation}
+              chartType={CHART_TYPES.TOP_SUBJECTS_BY_COMPLETIONS}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx
index f08446f4d4..e920b824a8 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx
@@ -6,6 +6,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import '@testing-library/jest-dom';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import Completions from './Completions';
 import { queryClient } from '../../test/testUtils';
@@ -62,17 +63,19 @@ describe('Completions Component', () => {
     axiosMock.onGet(/\/completions(\?.*)/).reply(200, mockAnalyticsTableData);
 
     const { container } = render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Completions
-            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-            granularity="Daily"
-            calculation="Total"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Completions
+              enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+              granularity="Daily"
+              calculation="Total"
+            />
+          </IntlProvider>
+        </QueryClientProvider>
+      </Router>,
     );
 
     const sections = [
@@ -142,17 +145,19 @@ describe('Completions Component', () => {
     }));
 
     render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Completions
-            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-            granularity="Daily"
-            calculation="Total"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Completions
+              enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+              granularity="Daily"
+              calculation="Total"
+            />
+          </IntlProvider>
+        </QueryClientProvider>
+      </Router>,
     );
 
     expect(screen.getByText('Loading top courses by completions chart data')).toBeInTheDocument();
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx b/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
index 6d933e48c7..f25dfe9d3e 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
@@ -6,6 +6,7 @@ import { ANALYTICS_TABS, CHART_TYPES, chartColorMap } from '../data/constants';
 import AnalyticsTable from './AnalyticsTable';
 import ChartWrapper from '../charts/ChartWrapper';
 import { useEnterpriseAnalyticsData } from '../data/hooks';
+import DownloadCSV from '../DownloadCSV';
 
 const Engagements = ({
   startDate, endDate, granularity, calculation, enterpriseId,
@@ -36,12 +37,17 @@ const Engagements = ({
             defaultMessage: 'See audit and certificate track hours of learning over time.',
             description: 'Subtitle for the learning hours over time chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.ENGAGEMENTS}
-          chartType={CHART_TYPES.ENGAGEMENTS_OVER_TIME}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.ENGAGEMENTS}
+              granularity={granularity}
+              calculation={calculation}
+              chartType={CHART_TYPES.ENGAGEMENTS_OVER_TIME}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -76,12 +82,17 @@ const Engagements = ({
             defaultMessage: 'See the courses in which your learners spend the most time.',
             description: 'Subtitle for the top 10 courses by learning hours chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.ENGAGEMENTS}
-          chartType={CHART_TYPES.TOP_COURSES_BY_ENGAGEMENTS}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.ENGAGEMENTS}
+              granularity={granularity}
+              calculation={calculation}
+              chartType={CHART_TYPES.TOP_COURSES_BY_ENGAGEMENTS}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -119,12 +130,17 @@ const Engagements = ({
             defaultMessage: 'See the subjects your learners are spending the most time in.',
             description: 'Subtitle for the top 10 subjects by learning hours chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.ENGAGEMENTS}
-          chartType={CHART_TYPES.TOP_SUBJECTS_BY_ENGAGEMENTS}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.ENGAGEMENTS}
+              granularity={granularity}
+              calculation={calculation}
+              chartType={CHART_TYPES.TOP_SUBJECTS_BY_ENGAGEMENTS}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx
index 700b538fe8..9b4b196892 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx
@@ -6,6 +6,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import '@testing-library/jest-dom';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import Engagements from './Engagements';
 import { queryClient } from '../../test/testUtils';
@@ -64,17 +65,19 @@ describe('Engagements Component', () => {
     axiosMock.onGet(/\/engagements(\?.*)/).reply(200, mockAnalyticsTableData);
 
     const { container } = render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Engagements
-            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-            granularity="Daily"
-            calculation="Total"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Engagements
+              enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+              granularity="Daily"
+              calculation="Total"
+            />
+          </IntlProvider>
+        </QueryClientProvider>
+      </Router>,
     );
 
     const sections = [
@@ -145,17 +148,19 @@ describe('Engagements Component', () => {
     }));
 
     render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Engagements
-            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-            granularity="Daily"
-            calculation="Total"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Engagements
+              enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+              granularity="Daily"
+              calculation="Total"
+            />
+          </IntlProvider>
+        </QueryClientProvider>
+      </Router>,
     );
 
     expect(screen.getByText('Loading learning hours over time chart data')).toBeInTheDocument();
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
index 02df8747f0..b45fc2fc07 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import Header from '../Header';
-import { ANALYTICS_TABS, CHART_TYPES, chartColorMap } from '../data/constants';
+import { ANALYTICS_TABS, chartColorMap } from '../data/constants';
 import AnalyticsTable from './AnalyticsTable';
 import ChartWrapper from '../charts/ChartWrapper';
-import { useEnterpriseAnalyticsData } from '../data/hooks';
+import { useEnterpriseEnrollmentsData } from '../data/hooks';
+import DownloadCSVButton from '../DownloadCSVButton';
+
+dayjs.extend(utc);
 
 const Enrollments = ({
   startDate, endDate, granularity, calculation, enterpriseId,
@@ -13,14 +18,50 @@ const Enrollments = ({
   const intl = useIntl();
   const {
     isFetching, isError, data,
-  } = useEnterpriseAnalyticsData({
+  } = useEnterpriseEnrollmentsData({
     enterpriseCustomerUUID: enterpriseId,
-    key: ANALYTICS_TABS.ENROLLMENTS,
     startDate,
     endDate,
     granularity,
     calculation,
   });
+  const enrollmentsOverTimeForCSV = useMemo(() => {
+    if (data?.enrollmentsOverTime) {
+      return data.enrollmentsOverTime.map(({
+        enterpriseEnrollmentDate, enrollmentCount, enrollType,
+      }) => ({
+        enterprise_enrollment_date: dayjs.utc(enterpriseEnrollmentDate).toISOString().split('T')[0],
+        certificate: enrollmentCount,
+        enroll_type: enrollType,
+      }));
+    }
+    return [];
+  }, [data]);
+  const topCoursesByEnrollmentsForCSV = useMemo(() => {
+    if (data?.topCoursesByEnrollments) {
+      return data.topCoursesByEnrollments.map(({
+        courseKey, courseTitle, enrollmentCount, enrollType,
+      }) => ({
+        course_key: courseKey,
+        course_title: courseTitle,
+        certificate: enrollmentCount,
+        enroll_type: enrollType,
+      }));
+    }
+    return [];
+  }, [data]);
+  const topSubjectsByEnrollmentsForCSV = useMemo(() => {
+    if (data?.topSubjectsByEnrollments) {
+      return data.topSubjectsByEnrollments.map(({
+        courseSubject, enrollmentCount, enrollType,
+      }) => ({
+        course_subject: courseSubject,
+        certificate: enrollmentCount,
+        enroll_type: enrollType,
+      }));
+    }
+    return [];
+  }, [data]);
 
   return (
     <div className="tab-enrollments mt-4">
@@ -36,14 +77,12 @@ const Enrollments = ({
             defaultMessage: 'See audit and certificate track enrollments over time.',
             description: 'Subtitle for the enrollments over time chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          granularity={granularity}
-          calculation={calculation}
-          activeTab={ANALYTICS_TABS.ENROLLMENTS}
-          chartType={CHART_TYPES.ENROLLMENTS_OVER_TIME}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSVButton
+              jsonData={enrollmentsOverTimeForCSV}
+              csvFileName={`Enrolments over time - ${startDate} - ${endDate} (${granularity} ${calculation})`}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -52,7 +91,7 @@ const Enrollments = ({
           chartProps={{
             data: data?.enrollmentsOverTime,
             xKey: 'enterpriseEnrollmentDate',
-            yKey: 'count',
+            yKey: 'enrollmentCount',
             colorKey: 'enrollType',
             colorMap: chartColorMap,
             xAxisTitle: '',
@@ -78,14 +117,12 @@ const Enrollments = ({
             defaultMessage: 'See the most popular courses at your organization.',
             description: 'Subtitle for the top 10 courses by enrollment chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          granularity={granularity}
-          calculation={calculation}
-          activeTab={ANALYTICS_TABS.ENROLLMENTS}
-          chartType={CHART_TYPES.TOP_COURSES_BY_ENROLLMENTS}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSVButton
+              jsonData={topCoursesByEnrollmentsForCSV}
+              csvFileName={`Top Courses by Enrollment - ${startDate} - ${endDate} (${granularity} ${calculation})`}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -94,7 +131,7 @@ const Enrollments = ({
           chartProps={{
             data: data?.topCoursesByEnrollments,
             xKey: 'courseKey',
-            yKey: 'count',
+            yKey: 'enrollmentCount',
             colorKey: 'enrollType',
             colorMap: chartColorMap,
             xAxisTitle: '',
@@ -120,14 +157,12 @@ const Enrollments = ({
             defaultMessage: 'See the most popular subjects at your organization.',
             description: 'Subtitle for the top 10 subjects by enrollment chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          granularity={granularity}
-          calculation={calculation}
-          activeTab={ANALYTICS_TABS.ENROLLMENTS}
-          chartType={CHART_TYPES.TOP_SUBJECTS_BY_ENROLLMENTS}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSVButton
+              jsonData={topSubjectsByEnrollmentsForCSV}
+              csvFileName={`Top Subjects by Enrollment - ${startDate} - ${endDate} (${granularity} ${calculation})`}
+            />
+          )}
         />
         <ChartWrapper
           isFetching={isFetching}
@@ -136,7 +171,7 @@ const Enrollments = ({
           chartProps={{
             data: data?.topSubjectsByEnrollments,
             xKey: 'courseSubject',
-            yKey: 'count',
+            yKey: 'enrollmentCount',
             colorKey: 'enrollType',
             colorMap: chartColorMap,
             xAxisTitle: '',
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx
index 95e9c16095..b129721370 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx
@@ -6,6 +6,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import '@testing-library/jest-dom';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import Enrollments from './Enrollments';
 import { queryClient } from '../../test/testUtils';
@@ -64,17 +65,19 @@ describe('Enrollments Component', () => {
     axiosMock.onGet(/\/enrollments(\?.*)/).reply(200, mockAnalyticsTableData);
 
     const { container } = render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Enrollments
-            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-            granularity="Daily"
-            calculation="Total"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Enrollments
+              enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+              granularity="Daily"
+              calculation="Total"
+            />
+          </IntlProvider>,
+        </QueryClientProvider>
+      </Router>,
     );
 
     const sections = [
@@ -146,17 +149,19 @@ describe('Enrollments Component', () => {
     }));
 
     render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Enrollments
-            enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-            granularity="Daily"
-            calculation="Total"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Enrollments
+              enterpriseId="33ce6562-95e0-4ecf-a2a7-7d407eb96f69"
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+              granularity="Daily"
+              calculation="Total"
+            />
+          </IntlProvider>,
+        </QueryClientProvider>
+      </Router>,
     );
 
     expect(screen.getByText('Loading enrollments over time chart data')).toBeInTheDocument();
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx
index 0f6ce03d14..1c09351b0a 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx
@@ -7,6 +7,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { BrowserRouter as Router } from 'react-router-dom';
 import Leaderboard from './Leaderboard';
 import { queryClient } from '../../test/testUtils';
 import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
@@ -55,15 +56,17 @@ const TEST_ENTERPRISE_ID = '33ce6562-95e0-4ecf-a2a7-7d407eb96f69';
 describe('Leaderboard Component', () => {
   test('renders all sections with correct classes and content', () => {
     const { container } = render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Leaderboard
-            enterpriseId={TEST_ENTERPRISE_ID}
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Leaderboard
+              enterpriseId={TEST_ENTERPRISE_ID}
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+            />
+          </IntlProvider>,
+        </QueryClientProvider>
+      </Router>,
     );
 
     const sections = [
@@ -82,15 +85,17 @@ describe('Leaderboard Component', () => {
   });
   test('renders the table rows with correct values', async () => {
     render(
-      <QueryClientProvider client={queryClient()}>
-        <IntlProvider locale="en">
-          <Leaderboard
-            enterpriseId={TEST_ENTERPRISE_ID}
-            startDate="2021-01-01"
-            endDate="2021-12-31"
-          />
-        </IntlProvider>,
-      </QueryClientProvider>,
+      <Router>
+        <QueryClientProvider client={queryClient()}>
+          <IntlProvider locale="en">
+            <Leaderboard
+              enterpriseId={TEST_ENTERPRISE_ID}
+              startDate="2021-01-01"
+              endDate="2021-12-31"
+            />
+          </IntlProvider>,
+        </QueryClientProvider>
+      </Router>,
     );
 
     // validate the header row
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Skills.jsx b/src/components/AdvanceAnalyticsV2/tabs/Skills.jsx
index 1cd58463ff..caf9315337 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Skills.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Skills.jsx
@@ -7,6 +7,7 @@ import {
 } from '../data/constants';
 import { useEnterpriseAnalyticsData } from '../data/hooks';
 import ChartWrapper from '../charts/ChartWrapper';
+import DownloadCSV from '../DownloadCSV';
 
 const Skills = ({ startDate, endDate, enterpriseId }) => {
   const intl = useIntl();
@@ -34,12 +35,15 @@ const Skills = ({ startDate, endDate, enterpriseId }) => {
             defaultMessage: 'See the top skills that are the most in demand in your organization, based on enrollments and completions.',
             description: 'Subtitle for the top skills chart.',
           })}
-          startDate={startDate}
-          endDate={endDate}
-          activeTab={ANALYTICS_TABS.SKILLS}
-          chartType={CHART_TYPES.BUBBLE}
-          enterpriseId={enterpriseId}
-          isDownloadCSV
+          DownloadCSVComponent={(
+            <DownloadCSV
+              enterpriseId={enterpriseId}
+              startDate={startDate}
+              endDate={endDate}
+              activeTab={ANALYTICS_TABS.SKILLS}
+              chartType={CHART_TYPES.BUBBLE}
+            />
+          )}
         />
 
         <ChartWrapper
diff --git a/src/components/AdvanceAnalyticsV2/tests/AnalyticsV2Page.test.jsx b/src/components/AdvanceAnalyticsV2/tests/AnalyticsV2Page.test.jsx
index aada545617..1f2ad47aec 100644
--- a/src/components/AdvanceAnalyticsV2/tests/AnalyticsV2Page.test.jsx
+++ b/src/components/AdvanceAnalyticsV2/tests/AnalyticsV2Page.test.jsx
@@ -6,6 +6,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import { BrowserRouter as Router } from 'react-router-dom';
 import AnalyticsV2Page from '../AnalyticsV2Page';
 import { queryClient } from '../../test/testUtils';
 import '@testing-library/jest-dom';
@@ -36,13 +37,15 @@ const store = mockStore({
 });
 
 const renderWithProviders = (component) => render(
-  <QueryClientProvider client={queryClient()}>
-    <Provider store={store}>
-      <IntlProvider locale="en">
-        {component}
-      </IntlProvider>
-    </Provider>
-  </QueryClientProvider>,
+  <Router>
+    <QueryClientProvider client={queryClient()}>
+      <Provider store={store}>
+        <IntlProvider locale="en">
+          {component}
+        </IntlProvider>
+      </Provider>
+    </QueryClientProvider>
+  </Router>,
 );
 
 describe('AnalyticsV2Page', () => {
diff --git a/src/data/services/EnterpriseDataApiService.js b/src/data/services/EnterpriseDataApiService.js
index 79f3d04884..5fe872cbeb 100644
--- a/src/data/services/EnterpriseDataApiService.js
+++ b/src/data/services/EnterpriseDataApiService.js
@@ -204,6 +204,18 @@ class EnterpriseDataApiService {
     const url = `${EnterpriseDataApiService.enterpriseAdminAnalyticsV2BaseUrl}${enterpriseId}/${chartUrl}?${new URLSearchParams(options).toString()}`;
     return EnterpriseDataApiService.apiClient().get(url);
   }
+
+  static getAnalyticsCSVDownloadURL(key, enterpriseId, options) {
+    const queryParams = new URLSearchParams({
+      ...options,
+      ...{ response_type: 'csv' },
+    });
+    const tableURL = EnterpriseDataApiService.constructAnalyticsDataURL(
+      key,
+      `${EnterpriseDataApiService.enterpriseAdminAnalyticsV2BaseUrl}${enterpriseId}`,
+    );
+    return `${tableURL}?${queryParams.toString()}`;
+  }
 }
 
 export default EnterpriseDataApiService;