@coorpacademy/components 11.32.2 → 11.32.4

package/lib/molecule/learner-skill-card/index.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
-
 var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -39,6 +37,7 @@ const LearnerSkillCard = (props, context) => {
     onExploreClick
   } = props;
   const {
+    score,
     skillCourses,
     skillQuestions,
     completedCourses = 0
@@ -48,7 +47,7 @@ const LearnerSkillCard = (props, context) => {
     translate
   } = context;
   const [hovered, setHovered] = (0, _react.useState)(false);
-  const primarySkinColor = (0, _getOr2.default)('#0061FF', 'common.primary', skin);
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
   const reviewLocale = translate('Review');
   const exploreLocale = translate('Explore');
   const coursesLocale = translate('courses');
@@ -88,13 +87,12 @@ const LearnerSkillCard = (props, context) => {
       }
     }
   };
-  const completedPercentage = skillCourses && Number.parseInt(completedCourses / skillCourses * 100);
   const ProgressBar = (0, _react.useCallback)(() => {
     if (!skillCourses) return null;
     const progressBarColor = '#3EC483';
     const inlineProgressValueStyle = {
       backgroundColor: progressBarColor,
-      width: `${completedPercentage}%`
+      width: `${score}%`
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.progressWrapper
@@ -105,7 +103,7 @@ const LearnerSkillCard = (props, context) => {
       role: "progressbar",
       "aria-label": (0, _get2.default)('progression', ariaLabel)
     }));
-  }, [completedPercentage, ariaLabel, skillCourses]);
+  }, [score, ariaLabel, skillCourses]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.learnerSkillCardWrapper,
     "data-name": "learner-skill-card-wrapper",
@@ -144,12 +142,12 @@ const LearnerSkillCard = (props, context) => {
     "data-name": "skill-completed-courses"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.progressInformationNumber
-  }, completedCourses), coursesCompletedLocale), /*#__PURE__*/_react.default.createElement("div", {
+  }, completedCourses), ` ${coursesCompletedLocale}`), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformation,
     "data-name": "completed-percentage"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.progressInformationNumber
-  }, completedPercentage, "%")))), /*#__PURE__*/_react.default.createElement("div", {
+  }, score, "%")))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.ctaWrapper,
     "data-name": "cta-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonReviewProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -161,6 +159,7 @@ const LearnerSkillCard = (props, context) => {
 };
 
 LearnerSkillCard.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
 LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -169,6 +168,7 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
   skillAriaLabel: _propTypes.default.string,
   focus: _propTypes.default.bool,
   metrics: _propTypes.default.shape({
+    score: _propTypes.default.number,
     skillCourses: _propTypes.default.number,
     skillQuestions: _propTypes.default.number,
     completedCourses: _propTypes.default.number

package/lib/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const completedPercentage =\n    skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${completedPercentage}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [completedPercentage, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {coursesCompletedLocale}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [score, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {` ${coursesCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{score}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/lib/molecule/learning-profile-radar-chart/index.js

@@ -415,7 +415,7 @@ const LearningProfileRadarChart = ({
     cy: "50%",
     outerRadius: "80%",
     data: formatedData
-  }, gradients, buildRadars(totalDataset, handleOnDotClick, activeDot), /*#__PURE__*/_react.default.createElement(_recharts.PolarGrid, {
+  }, gradients, /*#__PURE__*/_react.default.createElement(_recharts.PolarGrid, {
     strokeDasharray: 10,
     strokeWidth: 2,
     radialLines: false
@@ -426,7 +426,7 @@ const LearningProfileRadarChart = ({
     tick: false,
     axisLine: false,
     domain: [0, 100]
-  }), isMobile ? /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  }), buildRadars(totalDataset, handleOnDotClick, activeDot), isMobile ? /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     cursor: false,
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
   }) : null);

package/lib/molecule/learning-profile-radar-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","style","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","tooltipLabel","tooltipValue","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onTouchStart","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickeForeignObject","classnames","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","isMobile","setIsMobile","useState","setActiveDot","Object","assign","useMemo","gradients","userAgent","navigator","isMobile_","getIsMobile","setIsMobile_","useCallback","useEffect","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes","learningProfileRadarChartPropTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n  Radar,\n  RadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  ResponsiveContainer,\n  Tooltip,\n  PolarRadiusAxis\n} from 'recharts';\nimport {\n  pipe,\n  keyBy,\n  mapValues,\n  size,\n  getOr,\n  map,\n  toPairs,\n  values,\n  isEmpty,\n  omit,\n  fromPairs,\n  times,\n  flatten,\n  findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -75}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n  gradient: {\n    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n  },\n  percentage: {\n    color: BLACK,\n    background: WHITE\n  },\n  label: {\n    color: BLACK\n  }\n};\n\nconst CHART_CONFIGS = {\n  triangle: {\n    name: 'triangle',\n    ticks: [top, right, left],\n    sideCount: 3\n  },\n  quadrilateral: {\n    name: 'quadrilateral',\n    ticks: [top, right, bottom, left],\n    sideCount: 4\n  },\n  pentagon: {\n    name: 'pentagon',\n    ticks: [top, right, right, left, left],\n    sideCount: 5\n  },\n  hexagon: {\n    name: 'hexagon',\n    ticks: [top, right, right, bottom, left, left],\n    sideCount: 6\n  }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n  strokeWidth: 2,\n  strokeOpacity: 0.4,\n  fill: '#fff',\n  r: 4,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 6,\n  strokeWidth: 4,\n  strokeOpacity: 0.6\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 3,\n  strokeOpacity: 0.2,\n  fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n  <defs>\n    <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n      <stop offset=\"0%\" stopColor={firstColor} />\n      <stop offset=\"100%\" stopColor={secondColor} />\n    </linearGradient>\n  </defs>\n);\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label\n}: {\n  active?: boolean;\n  payload?: {value: number}[];\n  label?: string;\n}) =>\n  active && !!payload?.length ? (\n    <div className={style.tooltip}>\n      <span className={style.tooltipLabel}>{label}</span>\n      <span className={style.tooltipValue}>{payload[0].value}%</span>\n    </div>\n  ) : null;\n\nconst CustomDot = ({\n  cx,\n  cy,\n  payload,\n  onDotClick,\n  stroke,\n  activeDot,\n  dataName\n}: {\n  cx?: number;\n  cy?: number;\n  payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n  onDotClick: (name: string) => void;\n  dataKey: string;\n  stroke: string;\n  activeDot?: ActiveDotType;\n  dataName: string;\n}) => (\n  <circle\n    {...{\n      ...DOT_DEFAULT_PROPS,\n      ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n      stroke,\n      cx,\n      cy,\n      onTouchStart: () => {\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      onClick: e => {\n        e.stopPropagation();\n\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleOnDotClick: (name: string) => void,\n  activeDot?: ActiveDotType\n) =>\n  times(index => {\n    const datakey = `value${index + 1}`;\n    const dataset = `dataset-${index + 1}`;\n\n    return (\n      <Radar\n        {...RADAR_DEFAULT_PROPS}\n        fill={`url(#gradient-fill-${index})`}\n        stroke={`url(#gradient-stroke-${index})`}\n        key={dataset}\n        name={dataset}\n        dataKey={datakey}\n        activeDot={{\n          ...DOT_ACTIVE_PROPS,\n          stroke: `url(#gradient-stroke-${index})`\n        }}\n        // only on mobile\n        // to handle dot style on hover (convert to click)\n        // use with the tooltip component\n        dot={\n          <CustomDot\n            onDotClick={handleOnDotClick}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={`dot-${dataset}`}\n          />\n        }\n      />\n    );\n  }, totalDataset);\n\nconst buildCustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors,\n  onClick\n}: {\n  index: number;\n  x: number;\n  y: number;\n  percentagesValues: number[];\n  label: string;\n  chartType: CHART_TYPE_TYPE;\n  formatedColors: FormatedColorsType[];\n  activeDot?: ActiveDotType;\n  onClick: (name: string) => void;\n}) => {\n  const isCurrentDotActive = activeDot?.label === label;\n  const {\n    offset: {x: offsetX, y: offsetY},\n    alignment,\n    ...rest\n  } = CHART_CONFIGS[chartType].ticks[index];\n\n  function onLabelClick(e: React.MouseEvent) {\n    e.stopPropagation();\n    onClick(label);\n  }\n\n  return (\n    <g>\n      <foreignObject\n        className={style.tickeForeignObject}\n        x={x + offsetX}\n        y={y + offsetY}\n        width=\"200\"\n        height=\"65\"\n      >\n        <div\n          data-name={label}\n          onClick={onLabelClick}\n          className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n          style={{\n            ...rest,\n            alignItems: alignment,\n            textAlign: alignment,\n            opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n          }}\n        >\n          {formatedColors.map(\n            ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n              <Fragment key={i}>\n                <span className={style.tickValue} style={{color, background}}>\n                  {percentagesValues[i]}\n                </span>\n                <span className={style.tickLabel} style={{color: colorLabel}}>\n                  {label}\n                </span>\n              </Fragment>\n            )\n          )}\n        </div>\n      </foreignObject>\n    </g>\n  );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n  values_ => flatten([values_]),\n  values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n  fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n  legend: {[ref: string]: string},\n  data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n  pipe(\n    toPairs,\n    map(([ref, values_]: [string, number | number[]]) => ({\n      ...formatValues(values_),\n      subject: legend[ref]\n    }))\n  )(data_);\n\nexport const LearningProfileRadarChart = ({\n  data,\n  legend,\n  totalDataset,\n  colors: colorsProps,\n  onClick,\n  width,\n  height,\n  margin\n}: LearningProfileRadarChartPropTypes) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n  const formatedColors = times(i => {\n    if (!colorsProps?.length) return DEFAULT_COLORS;\n\n    const colors = colorsProps[i];\n    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n  })(totalDataset);\n\n  const chartType: CHART_TYPE_TYPE = useMemo(\n    () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n    [data]\n  );\n\n  const gradients = useMemo(\n    () =>\n      formatedColors.map(({gradient: {fill, stroke}}, index) => (\n        <svg key={`gradient-${index}`}>\n          <Gradient type={`fill-${index}`} colors={fill} />\n          <Gradient type={`stroke-${index}`} colors={stroke} />\n        </svg>\n      )),\n    [formatedColors]\n  );\n\n  const userAgent = navigator?.userAgent;\n  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n  const setIsMobile_ = useCallback(() => {\n    setIsMobile(isMobile_);\n  }, [isMobile_]);\n\n  useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n  useEffect(() => {\n    const handleClick = () => {\n      setActiveDot(undefined);\n      onClick(undefined);\n    };\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot, onClick, setActiveDot]);\n\n  function handleOnDotClick(label: string) {\n    const payload = formatedData.find(({subject}) => subject === label);\n    if (!payload) return;\n\n    const index = formatedData.indexOf(payload);\n    const datakey = `value${index + 1}`;\n    const skillRef = findKey(val => val === payload?.subject, legend);\n\n    if (skillRef) {\n      setActiveDot({\n        key: datakey,\n        value: payload[datakey],\n        label: payload.subject\n      });\n      onClick(skillRef);\n    }\n  }\n\n  function renderCustomLabel({\n    x,\n    y,\n    payload: {value: label},\n    index\n  }: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const currentData = formatedData.find(({subject}) => subject === label);\n    const percentagesValues: number[] = pipe(\n      omit('subject'),\n      mapValues(value => `${value}%`),\n      values\n    )(currentData);\n\n    return buildCustomLabel({\n      index,\n      x,\n      y,\n      percentagesValues,\n      label,\n      activeDot,\n      chartType,\n      formatedColors,\n      onClick: handleOnDotClick\n    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      margin={margin ?? (isMobile ? {top: 80} : {top: 180})}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={10} strokeWidth={2} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","style","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","tooltipLabel","tooltipValue","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onTouchStart","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickeForeignObject","classnames","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","isMobile","setIsMobile","useState","setActiveDot","Object","assign","useMemo","gradients","userAgent","navigator","isMobile_","getIsMobile","setIsMobile_","useCallback","useEffect","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes","learningProfileRadarChartPropTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n  Radar,\n  RadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  ResponsiveContainer,\n  Tooltip,\n  PolarRadiusAxis\n} from 'recharts';\nimport {\n  pipe,\n  keyBy,\n  mapValues,\n  size,\n  getOr,\n  map,\n  toPairs,\n  values,\n  isEmpty,\n  omit,\n  fromPairs,\n  times,\n  flatten,\n  findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -75}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n  gradient: {\n    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n  },\n  percentage: {\n    color: BLACK,\n    background: WHITE\n  },\n  label: {\n    color: BLACK\n  }\n};\n\nconst CHART_CONFIGS = {\n  triangle: {\n    name: 'triangle',\n    ticks: [top, right, left],\n    sideCount: 3\n  },\n  quadrilateral: {\n    name: 'quadrilateral',\n    ticks: [top, right, bottom, left],\n    sideCount: 4\n  },\n  pentagon: {\n    name: 'pentagon',\n    ticks: [top, right, right, left, left],\n    sideCount: 5\n  },\n  hexagon: {\n    name: 'hexagon',\n    ticks: [top, right, right, bottom, left, left],\n    sideCount: 6\n  }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n  strokeWidth: 2,\n  strokeOpacity: 0.4,\n  fill: '#fff',\n  r: 4,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 6,\n  strokeWidth: 4,\n  strokeOpacity: 0.6\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 3,\n  strokeOpacity: 0.2,\n  fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n  <defs>\n    <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n      <stop offset=\"0%\" stopColor={firstColor} />\n      <stop offset=\"100%\" stopColor={secondColor} />\n    </linearGradient>\n  </defs>\n);\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label\n}: {\n  active?: boolean;\n  payload?: {value: number}[];\n  label?: string;\n}) =>\n  active && !!payload?.length ? (\n    <div className={style.tooltip}>\n      <span className={style.tooltipLabel}>{label}</span>\n      <span className={style.tooltipValue}>{payload[0].value}%</span>\n    </div>\n  ) : null;\n\nconst CustomDot = ({\n  cx,\n  cy,\n  payload,\n  onDotClick,\n  stroke,\n  activeDot,\n  dataName\n}: {\n  cx?: number;\n  cy?: number;\n  payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n  onDotClick: (name: string) => void;\n  dataKey: string;\n  stroke: string;\n  activeDot?: ActiveDotType;\n  dataName: string;\n}) => (\n  <circle\n    {...{\n      ...DOT_DEFAULT_PROPS,\n      ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n      stroke,\n      cx,\n      cy,\n      onTouchStart: () => {\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      onClick: e => {\n        e.stopPropagation();\n\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleOnDotClick: (name: string) => void,\n  activeDot?: ActiveDotType\n) =>\n  times(index => {\n    const datakey = `value${index + 1}`;\n    const dataset = `dataset-${index + 1}`;\n\n    return (\n      <Radar\n        {...RADAR_DEFAULT_PROPS}\n        fill={`url(#gradient-fill-${index})`}\n        stroke={`url(#gradient-stroke-${index})`}\n        key={dataset}\n        name={dataset}\n        dataKey={datakey}\n        activeDot={{\n          ...DOT_ACTIVE_PROPS,\n          stroke: `url(#gradient-stroke-${index})`\n        }}\n        // only on mobile\n        // to handle dot style on hover (convert to click)\n        // use with the tooltip component\n        dot={\n          <CustomDot\n            onDotClick={handleOnDotClick}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={`dot-${dataset}`}\n          />\n        }\n      />\n    );\n  }, totalDataset);\n\nconst buildCustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors,\n  onClick\n}: {\n  index: number;\n  x: number;\n  y: number;\n  percentagesValues: number[];\n  label: string;\n  chartType: CHART_TYPE_TYPE;\n  formatedColors: FormatedColorsType[];\n  activeDot?: ActiveDotType;\n  onClick: (name: string) => void;\n}) => {\n  const isCurrentDotActive = activeDot?.label === label;\n  const {\n    offset: {x: offsetX, y: offsetY},\n    alignment,\n    ...rest\n  } = CHART_CONFIGS[chartType].ticks[index];\n\n  function onLabelClick(e: React.MouseEvent) {\n    e.stopPropagation();\n    onClick(label);\n  }\n\n  return (\n    <g>\n      <foreignObject\n        className={style.tickeForeignObject}\n        x={x + offsetX}\n        y={y + offsetY}\n        width=\"200\"\n        height=\"65\"\n      >\n        <div\n          data-name={label}\n          onClick={onLabelClick}\n          className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n          style={{\n            ...rest,\n            alignItems: alignment,\n            textAlign: alignment,\n            opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n          }}\n        >\n          {formatedColors.map(\n            ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n              <Fragment key={i}>\n                <span className={style.tickValue} style={{color, background}}>\n                  {percentagesValues[i]}\n                </span>\n                <span className={style.tickLabel} style={{color: colorLabel}}>\n                  {label}\n                </span>\n              </Fragment>\n            )\n          )}\n        </div>\n      </foreignObject>\n    </g>\n  );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n  values_ => flatten([values_]),\n  values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n  fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n  legend: {[ref: string]: string},\n  data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n  pipe(\n    toPairs,\n    map(([ref, values_]: [string, number | number[]]) => ({\n      ...formatValues(values_),\n      subject: legend[ref]\n    }))\n  )(data_);\n\nexport const LearningProfileRadarChart = ({\n  data,\n  legend,\n  totalDataset,\n  colors: colorsProps,\n  onClick,\n  width,\n  height,\n  margin\n}: LearningProfileRadarChartPropTypes) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n  const formatedColors = times(i => {\n    if (!colorsProps?.length) return DEFAULT_COLORS;\n\n    const colors = colorsProps[i];\n    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n  })(totalDataset);\n\n  const chartType: CHART_TYPE_TYPE = useMemo(\n    () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n    [data]\n  );\n\n  const gradients = useMemo(\n    () =>\n      formatedColors.map(({gradient: {fill, stroke}}, index) => (\n        <svg key={`gradient-${index}`}>\n          <Gradient type={`fill-${index}`} colors={fill} />\n          <Gradient type={`stroke-${index}`} colors={stroke} />\n        </svg>\n      )),\n    [formatedColors]\n  );\n\n  const userAgent = navigator?.userAgent;\n  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n  const setIsMobile_ = useCallback(() => {\n    setIsMobile(isMobile_);\n  }, [isMobile_]);\n\n  useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n  useEffect(() => {\n    const handleClick = () => {\n      setActiveDot(undefined);\n      onClick(undefined);\n    };\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot, onClick, setActiveDot]);\n\n  function handleOnDotClick(label: string) {\n    const payload = formatedData.find(({subject}) => subject === label);\n    if (!payload) return;\n\n    const index = formatedData.indexOf(payload);\n    const datakey = `value${index + 1}`;\n    const skillRef = findKey(val => val === payload?.subject, legend);\n\n    if (skillRef) {\n      setActiveDot({\n        key: datakey,\n        value: payload[datakey],\n        label: payload.subject\n      });\n      onClick(skillRef);\n    }\n  }\n\n  function renderCustomLabel({\n    x,\n    y,\n    payload: {value: label},\n    index\n  }: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const currentData = formatedData.find(({subject}) => subject === label);\n    const percentagesValues: number[] = pipe(\n      omit('subject'),\n      mapValues(value => `${value}%`),\n      values\n    )(currentData);\n\n    return buildCustomLabel({\n      index,\n      x,\n      y,\n      percentagesValues,\n      label,\n      activeDot,\n      chartType,\n      formatedColors,\n      onClick: handleOnDotClick\n    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      margin={margin ?? (isMobile ? {top: 80} : {top: 180})}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      <PolarGrid strokeDasharray={10} strokeWidth={2} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}

package/lib/molecule/skill-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AASA,gFA8HC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AASA,gFAgIC"}

package/lib/molecule/skill-picker-modal/index.js

@@ -61,13 +61,13 @@ const SkillPickerModal = (props, context) => {
   }, [skills, selectedSkillList, skillsLocales]);
   const isError = (0, _react.useMemo)(() => selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills, [selectedSkillList, maxSelectedSkills]);
   const footer = (0, _react.useMemo)(() => {
-    const footerDescription = isError ? translate('skill_focus_footer_error_description', {
+    const footerDescription = selectedSkillList.length > maxSelectedSkills ? translate('skill_focus_footer_error_description', {
       skillNumber: selectedSkillList.length - maxSelectedSkills
     }) : translate('skill_focus_footer_description', {
       skillNumber: minSelectedSkills - selectedSkillList.length
     });
     return {
-      text: isLoading || selectedSkillList.length <= maxSelectedSkills && selectedSkillList.length >= minSelectedSkills ? '' : footerDescription.replace('.'),
+      text: isLoading || !isError ? '' : footerDescription,
       isError,
       cancelButton: {
         onCancel: handleCancel,
@@ -126,7 +126,8 @@ const SkillPickerModal = (props, context) => {
       text: skillTitle,
       selected: focus,
       onClick: handleChipClick,
-      key: index
+      key: index,
+      backgroundColor: "skin"
     });
   })))));
 };

package/lib/molecule/skill-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","useState","handleCancel","useCallback","handleClose","skillList","useMemo","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","replace","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","style","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","filter","selectedSkill","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","string","objectOf","bool","number","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport filter from 'lodash/fp/filter';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillList = useMemo(() => {\n    return skills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill)\n      };\n    });\n  }, [skills, selectedSkillList, skillsLocales]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription = isError\n      ? translate('skill_focus_footer_error_description', {\n          skillNumber: selectedSkillList.length - maxSelectedSkills\n        })\n      : translate('skill_focus_footer_description', {\n          skillNumber: minSelectedSkills - selectedSkillList.length\n        });\n    return {\n      text:\n        isLoading ||\n        (selectedSkillList.length <= maxSelectedSkills &&\n          selectedSkillList.length >= minSelectedSkills)\n          ? ''\n          : footerDescription.replace('.'),\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div style={{marginBottom: '16px'}}>\n              {`${selectedSkillList.length} ${translate('selected')}`}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip text={skillTitle} selected={focus} onClick={handleChipClick} key={index} />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","useState","handleCancel","useCallback","handleClose","skillList","useMemo","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","style","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","filter","selectedSkill","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","string","objectOf","bool","number","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport filter from 'lodash/fp/filter';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillList = useMemo(() => {\n    return skills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill)\n      };\n    });\n  }, [skills, selectedSkillList, skillsLocales]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div style={{marginBottom: '16px'}}>\n              {`${selectedSkillList.length} ${translate('selected')}`}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}

package/lib/molecule/skills-chart-side-information-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"names":[],"mappings":";AAMA;;gBAWC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"names":[],"mappings":";AAMA;;gBAeC"}

package/lib/molecule/skills-chart-side-information-panel/index.js

@@ -24,6 +24,7 @@ const SkillsChartSideInformationPanel = ({
     key: `side-panel-item-${sidePanelItemProps.title}`
   })), sidePanelItems);
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "skill-chart-side-panel",
     className: _style.default.sidePanel
   }, sidePanel);
 };

package/lib/molecule/skills-chart-side-information-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SkillsChartSideInformationPanel","sidePanelItems","sidePanel","sidePanelItemProps","title","style","propTypes","PropTypes","arrayOf","shape","SkillsChartSideInformationItem"],"sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport SkillsChartSideInformationItem from '../skills-chart-side-information-item';\nimport style from './style.css';\n\nconst SkillsChartSideInformationPanel = ({sidePanelItems = []}) => {\n  const sidePanel = map(\n    sidePanelItemProps => (\n      <SkillsChartSideInformationItem\n        {...sidePanelItemProps}\n        key={`side-panel-item-${sidePanelItemProps.title}`}\n      />\n    ),\n    sidePanelItems\n  );\n  return <div className={style.sidePanel}>{sidePanel}</div>;\n};\n\nSkillsChartSideInformationPanel.propTypes = {\n  sidePanelItems: PropTypes.arrayOf(PropTypes.shape(SkillsChartSideInformationItem.propTypes))\n};\n\nexport default SkillsChartSideInformationPanel;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAEA,MAAMA,+BAA+B,GAAG,CAAC;EAACC,cAAc,GAAG;AAAlB,CAAD,KAA2B;EACjE,MAAMC,SAAS,GAAG,mBAChBC,kBAAkB,iBAChB,6BAAC,uCAAD,eACMA,kBADN;IAEE,GAAG,EAAG,mBAAkBA,kBAAkB,CAACC,KAAM;EAFnD,GAFc,EAOhBH,cAPgB,CAAlB;EASA,oBAAO;IAAK,SAAS,EAAEI,cAAA,CAAMH;EAAtB,GAAkCA,SAAlC,CAAP;AACD,CAXD;;AAaAF,+BAA+B,CAACM,SAAhC,2CAA4C;EAC1CL,cAAc,EAAEM,kBAAA,CAAUC,OAAV,CAAkBD,kBAAA,CAAUE,KAAV,CAAgBC,uCAAA,CAA+BJ,SAA/C,CAAlB;AAD0B,CAA5C;eAIeN,+B"}
+{"version":3,"file":"index.js","names":["SkillsChartSideInformationPanel","sidePanelItems","sidePanel","sidePanelItemProps","title","style","propTypes","PropTypes","arrayOf","shape","SkillsChartSideInformationItem"],"sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport SkillsChartSideInformationItem from '../skills-chart-side-information-item';\nimport style from './style.css';\n\nconst SkillsChartSideInformationPanel = ({sidePanelItems = []}) => {\n  const sidePanel = map(\n    sidePanelItemProps => (\n      <SkillsChartSideInformationItem\n        {...sidePanelItemProps}\n        key={`side-panel-item-${sidePanelItemProps.title}`}\n      />\n    ),\n    sidePanelItems\n  );\n  return (\n    <div data-name=\"skill-chart-side-panel\" className={style.sidePanel}>\n      {sidePanel}\n    </div>\n  );\n};\n\nSkillsChartSideInformationPanel.propTypes = {\n  sidePanelItems: PropTypes.arrayOf(PropTypes.shape(SkillsChartSideInformationItem.propTypes))\n};\n\nexport default SkillsChartSideInformationPanel;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAEA,MAAMA,+BAA+B,GAAG,CAAC;EAACC,cAAc,GAAG;AAAlB,CAAD,KAA2B;EACjE,MAAMC,SAAS,GAAG,mBAChBC,kBAAkB,iBAChB,6BAAC,uCAAD,eACMA,kBADN;IAEE,GAAG,EAAG,mBAAkBA,kBAAkB,CAACC,KAAM;EAFnD,GAFc,EAOhBH,cAPgB,CAAlB;EASA,oBACE;IAAK,aAAU,wBAAf;IAAwC,SAAS,EAAEI,cAAA,CAAMH;EAAzD,GACGA,SADH,CADF;AAKD,CAfD;;AAiBAF,+BAA+B,CAACM,SAAhC,2CAA4C;EAC1CL,cAAc,EAAEM,kBAAA,CAAUC,OAAV,CAAkBD,kBAAA,CAAUE,KAAV,CAAgBC,uCAAA,CAA+BJ,SAA/C,CAAlB;AAD0B,CAA5C;eAIeN,+B"}

package/lib/template/my-learning/index.d.ts

@@ -2,6 +2,27 @@ export default MyLearning;
 declare function MyLearning(props: any, context: any): JSX.Element;
 declare namespace MyLearning {
     namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {

package/lib/template/my-learning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAgHA,mEAkVC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAwHA,mEA4WC"}

package/lib/template/my-learning/index.js

@@ -13,7 +13,7 @@ var _map2 = _interopRequireDefault(require("lodash/fp/map"));
 
 var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
 
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -62,7 +62,7 @@ const ChangeSkillFocusButton = (props, context) => {
     skin,
     translate
   } = context;
-  const primarySkinColor = (0, _getOr2.default)('#0061FF', 'common.primary', skin);
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
   const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
   const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -91,6 +91,7 @@ const ChangeSkillFocusButton = (props, context) => {
 };
 
 ChangeSkillFocusButton.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
 ChangeSkillFocusButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -108,9 +109,13 @@ const FilterButton = (props, context) => {
     skin,
     translate
   } = context;
-  const primarySkinColor = (0, _getOr2.default)('#0061FF', 'common.primary', skin);
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
   const Content = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, filter, /*#__PURE__*/_react.default.createElement("span", {
-    className: active ? _style.default.skillFilterNumber : _style.default.skillFilterNumberInActive
+    className: active ? _style.default.skillFilterNumber : _style.default.skillFilterNumberInActive,
+    style: {
+      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
+      color: active ? primarySkinColor : '#515161'
+    }
   }, skillTotal)), [filter, skillTotal, active]);
   const buttonProps = {
     customStyle: {
@@ -127,6 +132,7 @@ const FilterButton = (props, context) => {
 };
 
 FilterButton.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
 FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -149,14 +155,19 @@ const MyLearning = (props, context) => {
     onExploreSkill
   } = props;
   const {
+    skin,
     translate
   } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
   const [open, setOpen] = (0, _react.useState)(false);
   const [selectedSkillsList, setSelectedSkillsList] = (0, _react.useState)(selectedSkills);
   const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = (0, _react.useState)(undefined);
   const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const [searchResults, setSearchResults] = (0, _react.useState)(skills);
+  const [searchResults, setSearchResults] = (0, _react.useState)(skills.sort((a, b) => skillsInformation[b].stats.score - skillsInformation[a].stats.score));
   const [activeFilter, setActiveFilter] = (0, _react.useState)('all');
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
   const skillsReviewReady = (0, _react.useMemo)(() => {
     return searchResults.filter(skill => skillsInformation[skill].availableForReview);
   }, [searchResults, skillsInformation]);
@@ -201,7 +212,7 @@ const MyLearning = (props, context) => {
     }
   }];
   const handleOnDotClick = (0, _react.useCallback)(skillRef => {
-    skillRef && setSkillFocusSelectedOnChart(skillRef);
+    setSkillFocusSelectedOnChart(skillRef);
   }, [setSkillFocusSelectedOnChart]);
   const handleOpenSkillPicker = (0, _react.useCallback)(() => setOpen(true), [setOpen]);
   const handleCloseSkillPicker = (0, _react.useCallback)(() => setOpen(false), [setOpen]);
@@ -233,6 +244,7 @@ const MyLearning = (props, context) => {
     onConfirm: handleConfirmSkillPicker,
     onClose: handleCloseSkillPicker
   }), learnerFeature ? /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "skill-focus-container",
     className: _style.default.skillFocusContainer
   }, /*#__PURE__*/_react.default.createElement("header", {
     className: _style.default.skillFocusHeader
@@ -251,12 +263,14 @@ const MyLearning = (props, context) => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillFocusHeaderContent
   }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "skill-focus-title",
     className: _style.default.skillFocusHeaderTitle
   }, translate('skill_focus')), /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "skill-focus-description",
     className: _style.default.skillFocusHeaderDescription
-  }, translate('skills_focus_description')))), selectedSkillsList.length > 0 ? /*#__PURE__*/_react.default.createElement(ChangeSkillFocusButton, {
+  }, translate('skills_focus_description')))), selectedSkillsList.length >= 3 ? /*#__PURE__*/_react.default.createElement(ChangeSkillFocusButton, {
     onClick: handleOpenSkillPicker
-  }) : null), selectedSkillsList.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : null), selectedSkillsList.length >= 3 ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillFocusContent
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.radarContainer
@@ -273,8 +287,8 @@ const MyLearning = (props, context) => {
         stroke: ['#0062ffff', '#8000FF']
       },
       percentage: {
-        color: '#0061FF',
-        background: 'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'
+        color: primarySkinColor,
+        background: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`)
       },
       label: {
         color: '#020202ff'
@@ -292,14 +306,18 @@ const MyLearning = (props, context) => {
     className: _style.default.skillFocusEmptyTitle
   }, translate('skills_focus_empty_title')), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillFocusEmptyDescription
-  }, translate('skills_focus_empty_description')), /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+  }, translate('skills_focus_empty_description')), /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: translate('skills_choose_focus'),
     type: "primary",
     customStyle: {
-      width: '168px'
+      width: '168px',
+      backgroundColor: hovered ? (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
     },
     onClick: handleOpenSkillPicker
-  }))) : null, /*#__PURE__*/_react.default.createElement("header", {
+  })))) : null, /*#__PURE__*/_react.default.createElement("header", {
     className: _style.default.skillListHeader
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillListHeaderIcon
@@ -377,15 +395,22 @@ const MyLearning = (props, context) => {
       onExploreSkill(skill);
     }
 
+    const {
+      score,
+      courses: skillCourses,
+      questionsAnswered: skillQuestions,
+      coursesCompleted: completedCourses
+    } = skillsInformation[skill].stats;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index
     }, /*#__PURE__*/_react.default.createElement(_learnerSkillCard.default, {
       skillTitle: skillsLocales[skill],
       focus: selectedSkills.includes(skill),
       metrics: {
-        skillCourses: skillsInformation[skill].stats.courses,
-        skillQuestions: skillsInformation[skill].stats.questionsAnswered,
-        completedCourses: skillsInformation[skill].stats.coursesCompleted
+        score,
+        skillCourses,
+        skillQuestions,
+        completedCourses
       },
       review: skillsInformation[skill].availableForReview,
       onReviewClick: handleReviewSkill,
@@ -395,6 +420,7 @@ const MyLearning = (props, context) => {
 };
 
 MyLearning.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
 MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {