From 2d883e70f1560c4868ffb147e83189cc4df4b7a8 Mon Sep 17 00:00:00 2001 From: muhammad-ammar Date: Fri, 13 Sep 2024 12:16:09 +0500 Subject: [PATCH] feat: translate scatter chart legend in skills tab --- .../charts/ChartWrapper.jsx | 13 +++++++++++- .../charts/ScatterChart.jsx | 7 +++++-- src/components/AdvanceAnalyticsV2/messages.js | 20 +++++++++++++++++++ .../tabs/Completions.test.jsx | 1 + .../tabs/Engagements.test.jsx | 1 + .../AdvanceAnalyticsV2/tabs/Enrollments.jsx | 1 - .../tabs/Enrollments.test.jsx | 1 + .../tabs/Leaderboard.test.jsx | 1 + 8 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx b/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx index e41c0454c0..ba3b009e69 100644 --- a/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx +++ b/src/components/AdvanceAnalyticsV2/charts/ChartWrapper.jsx @@ -42,7 +42,18 @@ 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.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/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 f08446f4d4..4a85b4e942 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 700b538fe8..99f6564790 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 36cb9a24c5..e0efa9701b 100644 --- a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx +++ b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx @@ -148,7 +148,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 95e9c16095..fed24370b4 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 0f6ce03d14..5d2b0df3b1 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';