feat: translate scatter chart legend in skills tab

openedx · Sep 19, 2024 · 566a9e3 · 566a9e3
1 parent 16a3152
commit 566a9e3
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 13 deletions.
diff --git 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
@@ -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,15 +33,15 @@ 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)),
       },
       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
@@ -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(
-      <ScatterChart {...props} />,
+    const wrapper = mount(
+      <IntlProvider locale="en">
+        <ScatterChart {...props} />,
+      </IntlProvider>,
     );
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}<br>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
@@ -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
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   render, screen, waitFor, within,
 } from '@testing-library/react';