-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Moved enrollments charts to new API endpoint.
- Loading branch information
1 parent
115c430
commit 97d3d53
Showing
23 changed files
with
933 additions
and
230 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
src/components/AdvanceAnalyticsV2/DownloadCSVButton.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
68 changes: 68 additions & 0 deletions
68
src/components/AdvanceAnalyticsV2/DownloadCSVButton.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.