@coorpacademy/components 11.32.3 → 11.32.5

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

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.formatData = exports.default = exports.LearningProfileRadarChart = void 0;
 
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
 var _findKey2 = _interopRequireDefault(require("lodash/fp/findKey"));
 
 var _flatten2 = _interopRequireDefault(require("lodash/fp/flatten"));
@@ -35,14 +37,20 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _recharts = require("recharts");
 
+var _cssColorFunction = require("css-color-function");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _checkIsMobile = require("../../util/check-is-mobile");
 
-var _style = _interopRequireDefault(require("./style.css"));
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
 
 var _types = require("./types");
 
+var _style = _interopRequireDefault(require("./style.css"));
+
 const _excluded = ["offset", "alignment"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -184,6 +192,7 @@ const CustomDot = ({
   cx,
   cy,
   payload,
+  onDotHover,
   onDotClick,
   stroke,
   activeDot,
@@ -201,10 +210,15 @@ const CustomDot = ({
     if (!payload?.name) return;
     onDotClick(payload.name);
   },
+  onMouseOver: () => {
+    if (!payload?.name) return;
+    onDotHover(payload.name);
+  },
+  onMouseLeave: () => onDotHover(''),
   'data-name': dataName
 }));
 
-const buildRadars = (totalDataset, handleOnDotClick, activeDot) => (0, _times2.default)(index => {
+const buildRadars = (totalDataset, handleDotHover, handleOnDotClick, activeDot) => (0, _times2.default)(index => {
   const datakey = `value${index + 1}`;
   const dataset = `dataset-${index + 1}`;
   return /*#__PURE__*/_react.default.createElement(_recharts.Radar, _extends({}, RADAR_DEFAULT_PROPS, {
@@ -220,6 +234,7 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => (0, _times2.d
     // use with the tooltip component
     ,
     dot: /*#__PURE__*/_react.default.createElement(CustomDot, {
+      onDotHover: handleDotHover,
       onDotClick: handleOnDotClick,
       activeDot: activeDot,
       dataKey: datakey,
@@ -229,7 +244,7 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => (0, _times2.d
   }));
 }, totalDataset);
 
-const buildCustomLabel = ({
+const CustomLabel = ({
   index,
   x,
   y,
@@ -238,8 +253,13 @@ const buildCustomLabel = ({
   activeDot,
   chartType,
   formatedColors,
-  onClick
+  primarySkinColor,
+  exploreLocale,
+  hoveredDot,
+  onClick,
+  onExploreClick
 }) => {
+  const [hovered, setHovered] = (0, _react.useState)(false);
   const isCurrentDotActive = activeDot?.label === label;
 
   const _CHART_CONFIGS$chartT = CHART_CONFIGS[chartType].ticks[index],
@@ -257,16 +277,44 @@ const buildCustomLabel = ({
     onClick(label);
   }
 
+  function handleExploreClick() {
+    onExploreClick(label);
+  }
+
+  const buttonExploreProps = {
+    customStyle: {
+      height: '36px',
+      backgroundColor: hovered ? primarySkinColor : (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+      color: hovered ? '#FFFFFF' : primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onClick: handleExploreClick,
+    'aria-label': `${label}, ${exploreLocale}`,
+    label: exploreLocale,
+    'data-name': 'learner-skill-card-explore-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'compass',
+        backgroundColor: hovered ? primarySkinColor : (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+        color: hovered ? '#FFFFFF' : primarySkinColor,
+        size: 16
+      }
+    }
+  };
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
+  const extraOffsetY = isCurrentDotActive && index === 0 ? -25 : 0;
   return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("foreignObject", {
     className: _style.default.tickeForeignObject,
     x: x + offsetX,
-    y: y + offsetY,
+    y: y + offsetY + extraOffsetY,
     width: "200",
     height: "65"
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": label,
     onClick: onLabelClick,
-    className: (0, _classnames.default)(_style.default.tickWrapper, isCurrentDotActive && _style.default.tickWrapperFocus),
+    className: (0, _classnames.default)(_style.default.tickWrapper, isCurrentDotActive && _style.default.tickWrapperFocus, hoveredDot === label && _style.default.tickWrapperHover),
     style: _extends({}, rest, {
       alignItems: alignment,
       textAlign: alignment,
@@ -293,7 +341,12 @@ const buildCustomLabel = ({
     style: {
       color: colorLabel
     }
-  }, label))))));
+  }, label))), isCurrentDotActive ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonWrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonExploreProps)) : null)));
 };
 /* UTILS */
 
@@ -314,12 +367,17 @@ const LearningProfileRadarChart = ({
   totalDataset,
   colors: colorsProps,
   onClick,
+  onExploreClick,
   width,
   height,
   margin
-}) => {
+}, legacyContext) => {
   const [isMobile, setIsMobile] = (0, _react.useState)(false);
   const [activeDot, setActiveDot] = (0, _react.useState)();
+  const [hoveredDot, setHoveredDot] = (0, _react.useState)('');
+  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
+  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
   const formatedColors = (0, _times2.default)(i => {
     if (!colorsProps?.length) return DEFAULT_COLORS;
     const colors = colorsProps[i];
@@ -358,7 +416,17 @@ const LearningProfileRadarChart = ({
     };
   }, [activeDot, onClick, setActiveDot]);
 
+  function handleOnActiveDotClick() {
+    setActiveDot(undefined);
+    onClick(undefined);
+  }
+
   function handleOnDotClick(label) {
+    if (!(0, _isEmpty2.default)(activeDot) && activeDot?.label === label) {
+      handleOnActiveDotClick();
+      return;
+    }
+
     const payload = formatedData.find(({
       subject
     }) => subject === label);
@@ -377,28 +445,45 @@ const LearningProfileRadarChart = ({
     }
   }
 
-  function renderCustomLabel({
-    x,
-    y,
-    payload: {
-      value: label
-    },
-    index
-  }) {
-    const currentData = formatedData.find(({
+  function handleExploreClick(label) {
+    const payload = formatedData.find(({
       subject
     }) => subject === label);
-    const percentagesValues = (0, _pipe2.default)((0, _omit2.default)('subject'), (0, _mapValues2.default)(value => `${value}%`), _values2.default)(currentData);
-    return buildCustomLabel({
-      index,
+    if (!payload) return;
+    const skillRef = (0, _findKey2.default)(val => val === payload?.subject, legend);
+
+    if (skillRef) {
+      onExploreClick(skillRef);
+    }
+  }
+
+  function renderCustomLabel(props) {
+    const {
       x,
       y,
-      percentagesValues,
-      label,
-      activeDot,
-      chartType,
-      formatedColors,
-      onClick: handleOnDotClick
+      payload: {
+        value: label
+      },
+      index
+    } = props;
+    const currentData = formatedData.find(({
+      subject
+    }) => subject === label);
+    const percentagesValues = (0, _pipe2.default)((0, _omit2.default)('subject'), (0, _mapValues2.default)(value => `${value}%`), _values2.default)(currentData);
+    return /*#__PURE__*/_react.default.createElement(CustomLabel, {
+      index: index,
+      x: x,
+      y: y,
+      percentagesValues: percentagesValues,
+      label: label,
+      activeDot: activeDot,
+      chartType: chartType,
+      formatedColors: formatedColors,
+      primarySkinColor: primarySkinColor,
+      exploreLocale: translate('Explore'),
+      hoveredDot: hoveredDot,
+      onClick: handleOnDotClick,
+      onExploreClick: handleExploreClick
     });
   }
 
@@ -415,7 +500,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 +511,7 @@ const LearningProfileRadarChart = ({
     tick: false,
     axisLine: false,
     domain: [0, 100]
-  }), isMobile ? /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  }), buildRadars(totalDataset, setHoveredDot, handleOnDotClick, activeDot), isMobile ? /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     cursor: false,
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
   }) : null);
@@ -439,6 +524,10 @@ const ResponsiveLearningProfileRadarChart = props => /*#__PURE__*/_react.default
   height: "100%"
 }, /*#__PURE__*/_react.default.createElement(LearningProfileRadarChart, props));
 
+LearningProfileRadarChart.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
 LearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? _types.learningProfileRadarChartPropTypes : {};
 ResponsiveLearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? _types.learningProfileRadarChartPropTypes : {};
 var _default = ResponsiveLearningProfileRadarChart;

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","onDotHover","onDotClick","activeDot","dataName","subject","onTouchStart","onClick","e","stopPropagation","onMouseOver","onMouseLeave","buildRadars","totalDataset","handleDotHover","handleOnDotClick","index","datakey","dataset","CustomLabel","percentagesValues","chartType","formatedColors","primarySkinColor","exploreLocale","hoveredDot","onExploreClick","hovered","setHovered","useState","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","handleExploreClick","buttonExploreProps","customStyle","height","backgroundColor","convert","transition","icon","position","faIcon","size","handleMouseOver","useCallback","handleMouseLeave","extraOffsetY","tickeForeignObject","classnames","tickWrapper","tickWrapperFocus","tickWrapperHover","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","buttonWrapper","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","legacyContext","isMobile","setIsMobile","setActiveDot","setHoveredDot","skin","GetSkinFromContext","translate","GetTranslateFromContext","Object","assign","useMemo","gradients","userAgent","navigator","isMobile_","getIsMobile","setIsMobile_","useEffect","handleClick","undefined","window","addEventListener","removeEventListener","handleOnActiveDotClick","formatedData","find","indexOf","skillRef","key","renderCustomLabel","props","currentData","ResponsiveLearningProfileRadarChart","contextTypes","Provider","childContextTypes","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  get\n} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\nimport style from './style.css';\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  onDotHover,\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  onDotHover: (name: string) => void;\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      onMouseOver: () => {\n        if (!payload?.name) return;\n        onDotHover(payload.name);\n      },\n      onMouseLeave: () => onDotHover(''),\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleDotHover: (name: string) => void,\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            onDotHover={handleDotHover}\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 CustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors,\n  primarySkinColor,\n  exploreLocale,\n  hoveredDot,\n  onClick,\n  onExploreClick\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  primarySkinColor: string;\n  exploreLocale: string;\n  hoveredDot: string;\n  onClick: (name: string) => void;\n  onExploreClick: (name: string) => void;\n}) => {\n  const [hovered, setHovered] = useState(false);\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  function handleExploreClick() {\n    onExploreClick(label);\n  }\n\n  const buttonExploreProps: ButtonLinkProps = {\n    customStyle: {\n      height: '36px',\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: handleExploreClick,\n    'aria-label': `${label}, ${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 handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const extraOffsetY = isCurrentDotActive && index === 0 ? -25 : 0;\n\n  return (\n    <g>\n      <foreignObject\n        className={style.tickeForeignObject}\n        x={x + offsetX}\n        y={y + offsetY + extraOffsetY}\n        width=\"200\"\n        height=\"65\"\n      >\n        <div\n          data-name={label}\n          onClick={onLabelClick}\n          className={classnames(\n            style.tickWrapper,\n            isCurrentDotActive && style.tickWrapperFocus,\n            hoveredDot === label && style.tickWrapperHover\n          )}\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          {isCurrentDotActive ? (\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          ) : null}\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  {\n    data,\n    legend,\n    totalDataset,\n    colors: colorsProps,\n    onClick,\n    onExploreClick,\n    width,\n    height,\n    margin\n  }: LearningProfileRadarChartPropTypes,\n  legacyContext: WebContextValues\n) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n  const [hoveredDot, setHoveredDot] = useState('');\n  const skin = GetSkinFromContext(legacyContext);\n  const translate = GetTranslateFromContext(legacyContext);\n  const primarySkinColor = get('common.primary', skin);\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 handleOnActiveDotClick() {\n    setActiveDot(undefined);\n    onClick(undefined);\n  }\n\n  function handleOnDotClick(label: string) {\n    if (!isEmpty(activeDot) && activeDot?.label === label) {\n      handleOnActiveDotClick();\n      return;\n    }\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 handleExploreClick(label: string) {\n    const payload = formatedData.find(({subject}) => subject === label);\n    if (!payload) return;\n\n    const skillRef = findKey(val => val === payload?.subject, legend);\n\n    if (skillRef) {\n      onExploreClick(skillRef);\n    }\n  }\n\n  function renderCustomLabel(props: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const {\n      x,\n      y,\n      payload: {value: label},\n      index\n    } = props;\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 (\n      <CustomLabel\n        index={index}\n        x={x}\n        y={y}\n        percentagesValues={percentagesValues}\n        label={label}\n        activeDot={activeDot}\n        chartType={chartType}\n        formatedColors={formatedColors}\n        primarySkinColor={primarySkinColor}\n        exploreLocale={translate('Explore')}\n        hoveredDot={hoveredDot}\n        onClick={handleOnDotClick}\n        onExploreClick={handleExploreClick}\n      />\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, setHoveredDot, 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.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}

package/lib/molecule/learning-profile-radar-chart/style.css

@@ -1,6 +1,7 @@
 @value colors: "../../variables/colors.css";
 @value cm_primary_blue from colors;
 @value cm_grey_50 from colors;
+@value cm_grey_75 from colors;
 @value lightDark from colors;
 
 .tickeForeignObject {
@@ -27,6 +28,14 @@
   width: fit-content;
 }
 
+.tickWrapper:hover,
+.tickWrapperHover {
+  background-color: cm_grey_75;
+  border-radius: 12px;
+}
+
+
+
 .tickValue {
   padding: 4px;
   border-radius: 12px;
@@ -64,4 +73,9 @@
 .tooltipValue {
   font-size: 14px;
   font-weight: 700;
+}
+
+.buttonWrapper {
+  width: 100%;
+  height: 36px;
 }

package/lib/molecule/learning-profile-radar-chart/types.d.ts

@@ -20,6 +20,7 @@ export declare const learningProfileRadarChartPropTypes: {
     }> | null | undefined)[]>;
     width: PropTypes.Requireable<number>;
     height: PropTypes.Requireable<number>;
+    onExploreClick: PropTypes.Requireable<(...args: any[]) => any>;
 };
 export declare const customDotPropTypes: {
     cx: PropTypes.Requireable<number>;
@@ -74,6 +75,7 @@ export declare type LearningProfileRadarChartPropTypes = {
     };
     totalDataset: number;
     onClick: (skillRef?: string) => void;
+    onExploreClick: (label?: string) => void;
     colors?: ColorType[];
     width?: number;
     height?: number;

package/lib/molecule/learning-profile-radar-chart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;CAuB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;CAmB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;CAQlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;CAG7B,CAAC;AAGF,oBAAY,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,oBAAY,kCAAkC,GAAG;IAC/C,IAAI,EAAE;QACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;KAClC,CAAC;IACF,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,OAAO,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,MAAM,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IAC/B,SAAS,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;CAmB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;CAQlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;CAG7B,CAAC;AAGF,oBAAY,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,oBAAY,kCAAkC,GAAG;IAC/C,IAAI,EAAE;QACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;KAClC,CAAC;IACF,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,OAAO,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,MAAM,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IAC/B,SAAS,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

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

@@ -26,7 +26,8 @@ const learningProfileRadarChartPropTypes = {
     })
   })),
   width: _propTypes.default.number,
-  height: _propTypes.default.number
+  height: _propTypes.default.number,
+  onExploreClick: _propTypes.default.func
 };
 exports.learningProfileRadarChartPropTypes = learningProfileRadarChartPropTypes;
 const customDotPropTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["learningProfileRadarChartPropTypes","data","PropTypes","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n  data: PropTypes.objectOf(\n    PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n  ).isRequired,\n  totalDataset: PropTypes.number.isRequired,\n  onDotClick: PropTypes.func,\n  colors: PropTypes.arrayOf(\n    PropTypes.shape({\n      gradient: PropTypes.shape({\n        fill: PropTypes.arrayOf(PropTypes.string),\n        stroke: PropTypes.arrayOf(PropTypes.string)\n      }),\n      percentage: PropTypes.shape({\n        color: PropTypes.string,\n        background: PropTypes.string\n      }),\n      label: PropTypes.shape({\n        color: PropTypes.string\n      })\n    })\n  ),\n  width: PropTypes.number,\n  height: PropTypes.number\n};\n\nexport const customDotPropTypes = {\n  cx: PropTypes.number,\n  cy: PropTypes.number,\n  payload: PropTypes.shape({\n    payload: PropTypes.shape({\n      value: PropTypes.number,\n      subject: PropTypes.string\n    }),\n    name: PropTypes.string\n  }),\n  onDotClick: PropTypes.func,\n  index: PropTypes.number,\n  activeDot: PropTypes.shape({\n    label: PropTypes.string,\n    value: PropTypes.number,\n    key: PropTypes.string\n  }),\n  dataKey: PropTypes.string,\n  stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n  active: PropTypes.bool,\n  payload: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number\n    })\n  ),\n  label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n  type: PropTypes.string,\n  colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n  gradient?: {\n    fill?: string[];\n    stroke?: string[];\n  };\n  percentage?: {\n    color?: string;\n    background?: string;\n  };\n  label?: {\n    color?: string;\n  };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n  data: {\n    [ref: string]: number | number[];\n  };\n  legend: {\n    [ref: string]: string;\n  };\n  totalDataset: number;\n  onClick: (skillRef?: string) => void;\n  colors?: ColorType[];\n  width?: number;\n  height?: number;\n  margin?: {\n    top?: number;\n    right?: number;\n    bottom?: number;\n    left?: number;\n  };\n};\n\nexport type CustomDotPropTypes = {\n  cx: number;\n  cy: number;\n  payload: {\n    payload: {\n      value: number;\n      subject: string;\n    };\n    name: string;\n  };\n  onDotClick: (name: string) => void;\n  index: number;\n  activeDot?: {\n    label: string;\n    value: number;\n    key: string;\n  };\n  dataKey: string;\n  stroke: string;\n};\n\nexport type CustomTooltipPropTypes = {\n  active: boolean;\n  payload: {\n    value: number;\n  }[];\n  label: string;\n};\n\nexport type GradientPropTypes = {\n  type: string;\n  colors: string[];\n};\n\nexport type TickType = {\n  offset: {x: number; y: number};\n  alignment: 'center' | 'start' | 'end';\n  margin?: 'auto';\n  marginLeft?: 'auto';\n  marginRight?: 'auto';\n};\n\nexport type FormatedColorsType = {\n  gradient: {\n    fill: string[];\n    stroke: string[];\n  };\n  percentage: {\n    color: string;\n    background: string;\n  };\n  label: {\n    color: string;\n  };\n};\n\nexport type FormatedDataType = {\n  subject: string;\n} & {\n  [key: string]: number | string;\n};\n\nexport type ActiveDotType = {\n  key: string;\n  value: number | string;\n  label: string;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA;AACO,MAAMA,kCAAkC,GAAG;EAChDC,IAAI,EAAEC,kBAAA,CAAUC,QAAV,CACJD,kBAAA,CAAUE,SAAV,CAAoB,CAACF,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUI,MAA5B,CAAD,EAAsCJ,kBAAA,CAAUI,MAAhD,CAApB,CADI,EAEJC,UAH8C;EAIhDC,YAAY,EAAEN,kBAAA,CAAUI,MAAV,CAAiBC,UAJiB;EAKhDE,UAAU,EAAEP,kBAAA,CAAUQ,IAL0B;EAMhDC,MAAM,EAAET,kBAAA,CAAUG,OAAV,CACNH,kBAAA,CAAUU,KAAV,CAAgB;IACdC,QAAQ,EAAEX,kBAAA,CAAUU,KAAV,CAAgB;MACxBE,IAAI,EAAEZ,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B,CADkB;MAExBC,MAAM,EAAEd,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;IAFgB,CAAhB,CADI;IAKdE,UAAU,EAAEf,kBAAA,CAAUU,KAAV,CAAgB;MAC1BM,KAAK,EAAEhB,kBAAA,CAAUa,MADS;MAE1BI,UAAU,EAAEjB,kBAAA,CAAUa;IAFI,CAAhB,CALE;IASdK,KAAK,EAAElB,kBAAA,CAAUU,KAAV,CAAgB;MACrBM,KAAK,EAAEhB,kBAAA,CAAUa;IADI,CAAhB;EATO,CAAhB,CADM,CANwC;EAqBhDM,KAAK,EAAEnB,kBAAA,CAAUI,MArB+B;EAsBhDgB,MAAM,EAAEpB,kBAAA,CAAUI;AAtB8B,CAA3C;;AAyBA,MAAMiB,kBAAkB,GAAG;EAChCC,EAAE,EAAEtB,kBAAA,CAAUI,MADkB;EAEhCmB,EAAE,EAAEvB,kBAAA,CAAUI,MAFkB;EAGhCoB,OAAO,EAAExB,kBAAA,CAAUU,KAAV,CAAgB;IACvBc,OAAO,EAAExB,kBAAA,CAAUU,KAAV,CAAgB;MACvBe,KAAK,EAAEzB,kBAAA,CAAUI,MADM;MAEvBsB,OAAO,EAAE1B,kBAAA,CAAUa;IAFI,CAAhB,CADc;IAKvBc,IAAI,EAAE3B,kBAAA,CAAUa;EALO,CAAhB,CAHuB;EAUhCN,UAAU,EAAEP,kBAAA,CAAUQ,IAVU;EAWhCoB,KAAK,EAAE5B,kBAAA,CAAUI,MAXe;EAYhCyB,SAAS,EAAE7B,kBAAA,CAAUU,KAAV,CAAgB;IACzBQ,KAAK,EAAElB,kBAAA,CAAUa,MADQ;IAEzBY,KAAK,EAAEzB,kBAAA,CAAUI,MAFQ;IAGzB0B,GAAG,EAAE9B,kBAAA,CAAUa;EAHU,CAAhB,CAZqB;EAiBhCkB,OAAO,EAAE/B,kBAAA,CAAUa,MAjBa;EAkBhCC,MAAM,EAAEd,kBAAA,CAAUa;AAlBc,CAA3B;;AAqBA,MAAMmB,sBAAsB,GAAG;EACpCC,MAAM,EAAEjC,kBAAA,CAAUkC,IADkB;EAEpCV,OAAO,EAAExB,kBAAA,CAAUG,OAAV,CACPH,kBAAA,CAAUU,KAAV,CAAgB;IACde,KAAK,EAAEzB,kBAAA,CAAUI;EADH,CAAhB,CADO,CAF2B;EAOpCc,KAAK,EAAElB,kBAAA,CAAUa;AAPmB,CAA/B;;AAUA,MAAMsB,iBAAiB,GAAG;EAC/BC,IAAI,EAAEpC,kBAAA,CAAUa,MADe;EAE/BJ,MAAM,EAAET,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;AAFuB,CAA1B,C,CAKP"}
+{"version":3,"file":"types.js","names":["learningProfileRadarChartPropTypes","data","PropTypes","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","onExploreClick","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n  data: PropTypes.objectOf(\n    PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n  ).isRequired,\n  totalDataset: PropTypes.number.isRequired,\n  onDotClick: PropTypes.func,\n  colors: PropTypes.arrayOf(\n    PropTypes.shape({\n      gradient: PropTypes.shape({\n        fill: PropTypes.arrayOf(PropTypes.string),\n        stroke: PropTypes.arrayOf(PropTypes.string)\n      }),\n      percentage: PropTypes.shape({\n        color: PropTypes.string,\n        background: PropTypes.string\n      }),\n      label: PropTypes.shape({\n        color: PropTypes.string\n      })\n    })\n  ),\n  width: PropTypes.number,\n  height: PropTypes.number,\n  onExploreClick: PropTypes.func\n};\n\nexport const customDotPropTypes = {\n  cx: PropTypes.number,\n  cy: PropTypes.number,\n  payload: PropTypes.shape({\n    payload: PropTypes.shape({\n      value: PropTypes.number,\n      subject: PropTypes.string\n    }),\n    name: PropTypes.string\n  }),\n  onDotClick: PropTypes.func,\n  index: PropTypes.number,\n  activeDot: PropTypes.shape({\n    label: PropTypes.string,\n    value: PropTypes.number,\n    key: PropTypes.string\n  }),\n  dataKey: PropTypes.string,\n  stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n  active: PropTypes.bool,\n  payload: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number\n    })\n  ),\n  label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n  type: PropTypes.string,\n  colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n  gradient?: {\n    fill?: string[];\n    stroke?: string[];\n  };\n  percentage?: {\n    color?: string;\n    background?: string;\n  };\n  label?: {\n    color?: string;\n  };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n  data: {\n    [ref: string]: number | number[];\n  };\n  legend: {\n    [ref: string]: string;\n  };\n  totalDataset: number;\n  onClick: (skillRef?: string) => void;\n  onExploreClick: (label?: string) => void;\n  colors?: ColorType[];\n  width?: number;\n  height?: number;\n  margin?: {\n    top?: number;\n    right?: number;\n    bottom?: number;\n    left?: number;\n  };\n};\n\nexport type CustomDotPropTypes = {\n  cx: number;\n  cy: number;\n  payload: {\n    payload: {\n      value: number;\n      subject: string;\n    };\n    name: string;\n  };\n  onDotClick: (name: string) => void;\n  index: number;\n  activeDot?: {\n    label: string;\n    value: number;\n    key: string;\n  };\n  dataKey: string;\n  stroke: string;\n};\n\nexport type CustomTooltipPropTypes = {\n  active: boolean;\n  payload: {\n    value: number;\n  }[];\n  label: string;\n};\n\nexport type GradientPropTypes = {\n  type: string;\n  colors: string[];\n};\n\nexport type TickType = {\n  offset: {x: number; y: number};\n  alignment: 'center' | 'start' | 'end';\n  margin?: 'auto';\n  marginLeft?: 'auto';\n  marginRight?: 'auto';\n};\n\nexport type FormatedColorsType = {\n  gradient: {\n    fill: string[];\n    stroke: string[];\n  };\n  percentage: {\n    color: string;\n    background: string;\n  };\n  label: {\n    color: string;\n  };\n};\n\nexport type FormatedDataType = {\n  subject: string;\n} & {\n  [key: string]: number | string;\n};\n\nexport type ActiveDotType = {\n  key: string;\n  value: number | string;\n  label: string;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA;AACO,MAAMA,kCAAkC,GAAG;EAChDC,IAAI,EAAEC,kBAAA,CAAUC,QAAV,CACJD,kBAAA,CAAUE,SAAV,CAAoB,CAACF,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUI,MAA5B,CAAD,EAAsCJ,kBAAA,CAAUI,MAAhD,CAApB,CADI,EAEJC,UAH8C;EAIhDC,YAAY,EAAEN,kBAAA,CAAUI,MAAV,CAAiBC,UAJiB;EAKhDE,UAAU,EAAEP,kBAAA,CAAUQ,IAL0B;EAMhDC,MAAM,EAAET,kBAAA,CAAUG,OAAV,CACNH,kBAAA,CAAUU,KAAV,CAAgB;IACdC,QAAQ,EAAEX,kBAAA,CAAUU,KAAV,CAAgB;MACxBE,IAAI,EAAEZ,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B,CADkB;MAExBC,MAAM,EAAEd,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;IAFgB,CAAhB,CADI;IAKdE,UAAU,EAAEf,kBAAA,CAAUU,KAAV,CAAgB;MAC1BM,KAAK,EAAEhB,kBAAA,CAAUa,MADS;MAE1BI,UAAU,EAAEjB,kBAAA,CAAUa;IAFI,CAAhB,CALE;IASdK,KAAK,EAAElB,kBAAA,CAAUU,KAAV,CAAgB;MACrBM,KAAK,EAAEhB,kBAAA,CAAUa;IADI,CAAhB;EATO,CAAhB,CADM,CANwC;EAqBhDM,KAAK,EAAEnB,kBAAA,CAAUI,MArB+B;EAsBhDgB,MAAM,EAAEpB,kBAAA,CAAUI,MAtB8B;EAuBhDiB,cAAc,EAAErB,kBAAA,CAAUQ;AAvBsB,CAA3C;;AA0BA,MAAMc,kBAAkB,GAAG;EAChCC,EAAE,EAAEvB,kBAAA,CAAUI,MADkB;EAEhCoB,EAAE,EAAExB,kBAAA,CAAUI,MAFkB;EAGhCqB,OAAO,EAAEzB,kBAAA,CAAUU,KAAV,CAAgB;IACvBe,OAAO,EAAEzB,kBAAA,CAAUU,KAAV,CAAgB;MACvBgB,KAAK,EAAE1B,kBAAA,CAAUI,MADM;MAEvBuB,OAAO,EAAE3B,kBAAA,CAAUa;IAFI,CAAhB,CADc;IAKvBe,IAAI,EAAE5B,kBAAA,CAAUa;EALO,CAAhB,CAHuB;EAUhCN,UAAU,EAAEP,kBAAA,CAAUQ,IAVU;EAWhCqB,KAAK,EAAE7B,kBAAA,CAAUI,MAXe;EAYhC0B,SAAS,EAAE9B,kBAAA,CAAUU,KAAV,CAAgB;IACzBQ,KAAK,EAAElB,kBAAA,CAAUa,MADQ;IAEzBa,KAAK,EAAE1B,kBAAA,CAAUI,MAFQ;IAGzB2B,GAAG,EAAE/B,kBAAA,CAAUa;EAHU,CAAhB,CAZqB;EAiBhCmB,OAAO,EAAEhC,kBAAA,CAAUa,MAjBa;EAkBhCC,MAAM,EAAEd,kBAAA,CAAUa;AAlBc,CAA3B;;AAqBA,MAAMoB,sBAAsB,GAAG;EACpCC,MAAM,EAAElC,kBAAA,CAAUmC,IADkB;EAEpCV,OAAO,EAAEzB,kBAAA,CAAUG,OAAV,CACPH,kBAAA,CAAUU,KAAV,CAAgB;IACdgB,KAAK,EAAE1B,kBAAA,CAAUI;EADH,CAAhB,CADO,CAF2B;EAOpCc,KAAK,EAAElB,kBAAA,CAAUa;AAPmB,CAA/B;;AAUA,MAAMuB,iBAAiB,GAAG;EAC/BC,IAAI,EAAErC,kBAAA,CAAUa,MADe;EAE/BJ,MAAM,EAAET,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;AAFuB,CAA1B,C,CAKP"}

package/lib/molecule/review-correction-popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.js"],"names":[],"mappings":";AA+EA,gEAqDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.js"],"names":[],"mappings":";AA6EA,gEAqDC"}

package/lib/molecule/review-correction-popin/index.js

@@ -55,7 +55,7 @@ const KlfButton = ({
     }
   }), [klf.tooltip]);
   const toolTipProps = (0, _react.useMemo)(() => ({
-    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),
     AnchorElement: AnchorButton,
     TooltipContent,
     'aria-label': translate('More details'),

package/lib/molecule/review-correction-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["KlfButton","klf","legacyContext","translate","GetTranslateFromContext","klfButtonProps","useMemo","icon","position","type","AnchorButton","useCallback","onKeyDown","style","klfButtonContainer","klfButton","TooltipContent","tooltipText","__html","tooltip","toolTipProps","closeToolTipInformationTextAriaLabel","AnchorElement","tooltipClassName","toolTipCustomization","klfContainer","propTypes","contextTypes","Provider","childContextTypes","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","classnames","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton"],"sources":["../../../src/molecule/review-correction-popin/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Tooltip from '../../atom/tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst KlfButton = ({klf}, legacyContext) => {\n  const translate = GetTranslateFromContext(legacyContext);\n  const klfButtonProps = useMemo(\n    () => ({\n      ...klf,\n      icon: {\n        position: 'left',\n        type: 'key'\n      },\n      type: 'primary'\n    }),\n    [klf]\n  );\n\n  const AnchorButton = useCallback(\n    ({onKeyDown}) => (\n      <div className={style.klfButtonContainer}>\n        <ButtonLink\n          {...klfButtonProps}\n          className={style.klfButton}\n          onKeyDown={onKeyDown}\n          useTitle={false}\n        />\n      </div>\n    ),\n    [klfButtonProps]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <span\n        className={style.tooltipText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: klf.tooltip}}\n      />\n    ),\n    [klf.tooltip]\n  );\n\n  const toolTipProps = useMemo(\n    () => ({\n      closeToolTipInformationTextAriaLabel: translate(\n        'Press the escape key to close the information text'\n      ),\n      AnchorElement: AnchorButton,\n      TooltipContent,\n      'aria-label': translate('More details'),\n      tooltipClassName: style.toolTipCustomization\n    }),\n    [AnchorButton, TooltipContent, translate]\n  );\n\n  return (\n    <div className={style.klfContainer}>\n      <Tooltip {...toolTipProps} />\n    </div>\n  );\n};\n\nKlfButton.propTypes = {\n  klf: propTypes.klf\n};\n\nKlfButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? <KlfButton klf={klf} /> : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper} data-testid=\"review-correction-popin\">\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel}>\n            <span aria-label={resultLabel} role=\"status\">\n              {resultLabel}\n            </span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span\n              className={style.message}\n              aria-label={information.message}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: information.message}}\n            />\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer} data-testid=\"next-question-button-container\">\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = propTypes;\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["KlfButton","klf","legacyContext","translate","GetTranslateFromContext","klfButtonProps","useMemo","icon","position","type","AnchorButton","useCallback","onKeyDown","style","klfButtonContainer","klfButton","TooltipContent","tooltipText","__html","tooltip","toolTipProps","closeToolTipInformationTextAriaLabel","AnchorElement","tooltipClassName","toolTipCustomization","klfContainer","propTypes","contextTypes","Provider","childContextTypes","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","classnames","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton"],"sources":["../../../src/molecule/review-correction-popin/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Tooltip from '../../atom/tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst KlfButton = ({klf}, legacyContext) => {\n  const translate = GetTranslateFromContext(legacyContext);\n  const klfButtonProps = useMemo(\n    () => ({\n      ...klf,\n      icon: {\n        position: 'left',\n        type: 'key'\n      },\n      type: 'primary'\n    }),\n    [klf]\n  );\n\n  const AnchorButton = useCallback(\n    ({onKeyDown}) => (\n      <div className={style.klfButtonContainer}>\n        <ButtonLink\n          {...klfButtonProps}\n          className={style.klfButton}\n          onKeyDown={onKeyDown}\n          useTitle={false}\n        />\n      </div>\n    ),\n    [klfButtonProps]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <span\n        className={style.tooltipText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: klf.tooltip}}\n      />\n    ),\n    [klf.tooltip]\n  );\n\n  const toolTipProps = useMemo(\n    () => ({\n      closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),\n      AnchorElement: AnchorButton,\n      TooltipContent,\n      'aria-label': translate('More details'),\n      tooltipClassName: style.toolTipCustomization\n    }),\n    [AnchorButton, TooltipContent, translate]\n  );\n\n  return (\n    <div className={style.klfContainer}>\n      <Tooltip {...toolTipProps} />\n    </div>\n  );\n};\n\nKlfButton.propTypes = {\n  klf: propTypes.klf\n};\n\nKlfButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? <KlfButton klf={klf} /> : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper} data-testid=\"review-correction-popin\">\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel}>\n            <span aria-label={resultLabel} role=\"status\">\n              {resultLabel}\n            </span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span\n              className={style.message}\n              aria-label={information.message}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: information.message}}\n            />\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer} data-testid=\"next-question-button-container\">\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = propTypes;\n\nexport default ReviewCorrectionPopin;\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,gFA0HC"}
+{"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

@@ -126,7 +126,8 @@ const SkillPickerModal = (props, context) => {
       text: skillTitle,
       selected: focus,
       onClick: handleChipClick,
-      key: index
+      key: index,
+      backgroundColor: "skin"
     });
   })))));
 };