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';