diff --git a/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx b/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx index 4979239a15..ea00b26b4c 100644 --- a/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx +++ b/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx @@ -40,7 +40,18 @@ ChartWrapper.propTypes = { isFetching: PropTypes.bool.isRequired, isError: PropTypes.bool.isRequired, chartType: PropTypes.oneOf(['ScatterChart', 'LineChart', 'BarChart']).isRequired, - chartProps: PropTypes.shape({ data: PropTypes.shape({}) }).isRequired, + chartProps: PropTypes.shape({ + data: PropTypes.arrayOf(PropTypes.shape({})).isRequired, + xKey: PropTypes.string.isRequired, + yKey: PropTypes.string.isRequired, + colorKey: PropTypes.string.isRequired, + colorMap: PropTypes.objectOf(PropTypes.string).isRequired, + hovertemplate: PropTypes.string.isRequired, + xAxisTitle: PropTypes.string, + yAxisTitle: PropTypes.string, + markerSizeKey: PropTypes.string, + customDataKeys: PropTypes.arrayOf(PropTypes.string), + }).isRequired, loadingMessage: PropTypes.string.isRequired, }; diff --git a/src/components/AdvanceAnalyticsV2/charts/ScatterChart.jsx b/src/components/AdvanceAnalyticsV2/charts/ScatterChart.jsx index 3cd27aba19..d26e53b2b5 100644 --- a/src/components/AdvanceAnalyticsV2/charts/ScatterChart.jsx +++ b/src/components/AdvanceAnalyticsV2/charts/ScatterChart.jsx @@ -1,6 +1,8 @@ import React, { useMemo } from 'react'; import Plot from 'react-plotly.js'; import PropTypes from 'prop-types'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import messages from '../messages'; /** * ScatterChart component renders a scatter chart using Plotly.js. @@ -21,6 +23,7 @@ import PropTypes from 'prop-types'; const ScatterChart = ({ data, xKey, yKey, colorKey, colorMap, hovertemplate, xAxisTitle, yAxisTitle, markerSizeKey, customDataKeys, }) => { + const intl = useIntl(); const categories = Object.keys(colorMap); const traces = useMemo(() => categories.map(category => { @@ -30,7 +33,7 @@ const ScatterChart = ({ y: filteredData.map(item => item[yKey]), type: 'scatter', mode: 'markers', - name: category, + name: messages[category] ? intl.formatMessage(messages[category]) : category, marker: { color: colorMap[category], size: filteredData.map(item => item[markerSizeKey] * 0.015).map(size => (size < 5 ? size + 6 : size)), @@ -38,7 +41,7 @@ const ScatterChart = ({ customdata: customDataKeys.length ? filteredData.map(item => customDataKeys.map(key => item[key])) : [], hovertemplate, }; - }), [data, xKey, yKey, colorKey, colorMap, hovertemplate, categories, markerSizeKey, customDataKeys]); + }), [data, xKey, yKey, colorKey, colorMap, hovertemplate, categories, markerSizeKey, customDataKeys, intl]); const layout = { margin: { t: 0 }, diff --git a/src/components/AdvanceAnalyticsV2/charts/ScatterChart.test.jsx b/src/components/AdvanceAnalyticsV2/charts/ScatterChart.test.jsx index f728425027..39cc252232 100644 --- a/src/components/AdvanceAnalyticsV2/charts/ScatterChart.test.jsx +++ b/src/components/AdvanceAnalyticsV2/charts/ScatterChart.test.jsx @@ -1,6 +1,7 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import Plot from 'react-plotly.js'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import ScatterChart from './ScatterChart'; describe('ScatterChart', () => { @@ -28,8 +29,10 @@ describe('ScatterChart', () => { }; it('renders correctly', () => { - const wrapper = shallow( - , + const wrapper = mount( + + , + , ); const plotComponent = wrapper.find(Plot); const traces = plotComponent.prop('data'); diff --git a/src/components/AdvanceAnalyticsV2/data/utils.js b/src/components/AdvanceAnalyticsV2/data/utils.js index 5c68827b64..a17b9bd7cf 100644 --- a/src/components/AdvanceAnalyticsV2/data/utils.js +++ b/src/components/AdvanceAnalyticsV2/data/utils.js @@ -3,10 +3,10 @@ import { sum } from 'lodash'; import utc from 'dayjs/plugin/utc'; import quarterOfYear from 'dayjs/plugin/quarterOfYear'; import { CHART_TYPES, CALCULATION } from './constants'; +import messages from '../messages'; dayjs.extend(utc); dayjs.extend(quarterOfYear); -import messages from '../messages'; const simulateURL = (activeTab, chartType) => { if (!Object.values(CHART_TYPES).includes(chartType)) { diff --git a/src/components/AdvanceAnalyticsV2/data/utils.test.js b/src/components/AdvanceAnalyticsV2/data/utils.test.js index abaefbb757..b0f6713f28 100644 --- a/src/components/AdvanceAnalyticsV2/data/utils.test.js +++ b/src/components/AdvanceAnalyticsV2/data/utils.test.js @@ -1,6 +1,7 @@ // Jest test for utils.js -import { applyCalculation, applyGranularity } from './utils'; +import { createIntl } from '@edx/frontend-platform/i18n'; +import { applyCalculation, applyGranularity, constructChartHoverTemplate } from './utils'; import { CALCULATION, GRANULARITY } from './constants'; describe('utils', () => { @@ -201,8 +202,6 @@ describe('utils', () => { }); }); }); -import { createIntl } from '@edx/frontend-platform/i18n'; -import { constructChartHoverTemplate } from './utils'; describe('constructChartHoverTemplate', () => { const intl = createIntl({ diff --git a/src/components/AdvanceAnalyticsV2/messages.js b/src/components/AdvanceAnalyticsV2/messages.js index 1fefaa0d48..b49ee50b1c 100644 --- a/src/components/AdvanceAnalyticsV2/messages.js +++ b/src/components/AdvanceAnalyticsV2/messages.js @@ -29,6 +29,26 @@ const messages = defineMessages({ id: 'advance.analytics.learning.hours.label', defaultMessage: 'Learning Hours', }, + 'Common Skill': { + id: 'advance.analytics.common.skill.label', + defaultMessage: 'Common Skill', + }, + 'Specialized Skill': { + id: 'advance.analytics.specialized.skill.label', + defaultMessage: 'Specialized Skill', + }, + 'Hard Skill': { + id: 'advance.analytics.hard.skill.label', + defaultMessage: 'Hard Skill', + }, + 'Soft Skill': { + id: 'advance.analytics.soft.skill.label', + defaultMessage: 'Soft Skill', + }, + Certification: { + id: 'advance.analytics.certification.label', + defaultMessage: 'Certification', + }, }); export default messages; diff --git a/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx index 8cbf6037e7..428969b949 100644 --- a/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx +++ b/src/components/AdvanceAnalyticsV2/tabs/Completions.test.jsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { render, screen, waitFor, within, } from '@testing-library/react'; diff --git a/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx index 42327c1e38..a8f0b33d1f 100644 --- a/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx +++ b/src/components/AdvanceAnalyticsV2/tabs/Engagements.test.jsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { render, screen, waitFor, within, } from '@testing-library/react'; diff --git a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx index b238610ee7..357d083d2e 100644 --- a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx +++ b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx @@ -9,10 +9,9 @@ import AnalyticsTable from './AnalyticsTable'; import ChartWrapper from '../charts/ChartWrapper'; import { useEnterpriseEnrollmentsData } from '../data/hooks'; import DownloadCSVButton from '../DownloadCSVButton'; -import { modifyDataToIntroduceEnrollTypeCount } from '../data/utils'; +import { modifyDataToIntroduceEnrollTypeCount, constructChartHoverTemplate } from '../data/utils'; dayjs.extend(utc); -import { constructChartHoverTemplate } from '../data/utils'; const Enrollments = ({ startDate, endDate, granularity, calculation, enterpriseId, @@ -188,7 +187,6 @@ const Enrollments = ({ colorMap: chartColorMap, xAxisTitle: '', yAxisTitle: 'Number of Enrollments', - hovertemplate: 'Subject: %{x}
Enrolls: %{y}', hovertemplate: constructChartHoverTemplate(intl, { subject: '%{x}', enrollments: '%{y}', diff --git a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx index b37aecce61..2cd633244a 100644 --- a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx +++ b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.test.jsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { render, screen, waitFor, within, } from '@testing-library/react'; diff --git a/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx b/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx index 93520b6031..7af2e74066 100644 --- a/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx +++ b/src/components/AdvanceAnalyticsV2/tabs/Leaderboard.test.jsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { render, screen, waitFor, within, } from '@testing-library/react';