@coorpacademy/components 11.32.1-alpha.21 → 11.32.1-alpha.22

package/es/molecule/learning-profile-radar-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAwPjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AA8PjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

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

@@ -323,7 +323,7 @@ export const LearningProfileRadarChart = ({
     return () => {
       window.removeEventListener('click', handleClick);
     };
-  }, [activeDot]);
+  }, [activeDot, onClick, setActiveDot]);
 
   function handleOnDotClick(label) {
     const payload = formatedData.find(({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","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","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","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickeForeignObject","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","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"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      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 className={style.tickeForeignObject} x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\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]);\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":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","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","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","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickeForeignObject","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","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"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      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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"}

package/es/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":";AAQA,gFAsHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AAQA,gFAkIC"}

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

@@ -62,7 +62,7 @@ const SkillPickerModal = (props, context) => {
         disabled: isLoading || isError
       }
     };
-  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills]);
+  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills, minSelectedSkills]);
   if (!isLoading && !skills || !isOpen) return null;
   return /*#__PURE__*/React.createElement(BaseModal, {
     title: translate('skill_focus'),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","BaseModal","Chip","Loader","Provider","style","SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","handleCancel","handleClose","skillList","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","replace","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","filteredSelectedSkillList","filter","ref","push","contextTypes","childContextTypes","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 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    () => selectedSkillList.length > maxSelectedSkills,\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 && 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  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills]);\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, focus} = skill;\n                function handleChipClick() {\n                  let filteredSelectedSkillList = [...selectedSkillList];\n                  if (selectedSkillList.includes(skill.skillRef)) {\n                    filteredSelectedSkillList = filteredSelectedSkillList.filter(ref => ref !== skill.skillRef);\n                  } else {\n                    filteredSelectedSkillList.push(skill.skillRef);\n                  }\n                  setSelectedSkillList(filteredSelectedSkillList);\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":["React","useMemo","useState","useCallback","PropTypes","BaseModal","Chip","Loader","Provider","style","SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","handleCancel","handleClose","skillList","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","replace","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","filteredSelectedSkillList","filter","ref","push","contextTypes","childContextTypes","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 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    () => selectedSkillList.length > maxSelectedSkills,\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, focus} = skill;\n                function handleChipClick() {\n                  let filteredSelectedSkillList = [...selectedSkillList];\n                  if (selectedSkillList.includes(skill.skillRef)) {\n                    filteredSelectedSkillList = filteredSelectedSkillList.filter(\n                      ref => ref !== skill.skillRef\n                    );\n                  } else {\n                    filteredSelectedSkillList.push(skill.skillRef);\n                  }\n                  setSelectedSkillList(filteredSelectedSkillList);\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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"}

package/es/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":";AA2GA,mEAoRC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AA2GA,mEAuSC"}

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

@@ -2,7 +2,6 @@ import _getOr from "lodash/fp/getOr";
 import React, { useCallback, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
-import style from './style.css';
 import Provider from '../../atom/provider';
 import Icon from '../../atom/icon';
 import Picture from '../../atom/picture';
@@ -12,6 +11,7 @@ import SkillPickerModal from '../../molecule/skill-picker-modal';
 import ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';
 import SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';
 import LearnerSkillCard from '../../molecule/learner-skill-card';
+import style from './style.css';
 
 const ChangeSkillFocusButton = (props, context) => {
   const [hovered, setHovered] = useState(false);
@@ -135,14 +135,14 @@ const MyLearning = (props, context) => {
   }, [selectedSkillsList, skillsLocales]);
   const filters = [{
     name: 'all',
-    skills: skills
+    skills
   }, {
     name: 'review',
     skills: skillsReviewReady
   }];
-  const coursedCompletedData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].coursesCompleted : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
-  const questionsAnsweredData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].questionsAnswered : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
-  const learningHoursData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].learningHours : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const coursedCompletedData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].coursesCompleted : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0), [skillFocusSelected, skillsStats, selectedSkillsList]);
+  const questionsAnsweredData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].questionsAnswered : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0), [skillFocusSelected, skillsStats, selectedSkillsList]);
+  const learningHoursData = useMemo(() => skillFocusSelected ? skillsStats[skillFocusSelected].learningHours : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0), [skillFocusSelected, skillsStats, selectedSkillsList]);
   const skillChartPaneLegends = useMemo(() => translate('on', {
     focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')
   }), [translate, skillsLocales, skillFocusSelected]);
@@ -181,6 +181,8 @@ const MyLearning = (props, context) => {
   }, [onSkillFocusConfirm, setSelectedSkillsList, setOpen]);
   const TooltipContent = useCallback(() => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/React.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, translate('Choose 1 Skill')), /*#__PURE__*/React.createElement("li", null, translate('Answer 5 Questions')), /*#__PURE__*/React.createElement("li", null, translate('You have Infinite Lives')), /*#__PURE__*/React.createElement("li", null, translate('Get it all right')))), [translate]);
   return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroundContainer
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.container
   }, /*#__PURE__*/React.createElement(SkillPickerModal, {
     skills: skills,
@@ -323,7 +325,7 @@ const MyLearning = (props, context) => {
       onReviewClick: handleReviewSkill,
       onExploreClick: handleExploreSkill
     }));
-  })));
+  }))));
 };
 
 MyLearning.contextTypes = {

package/es/template/my-learning/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","style","Provider","Icon","Picture","ButtonLink","ToolTip","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","ChangeSkillFocusButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","icon","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsStats","skillsLocales","skillsFilters","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelected","setSkillFocusSelected","undefined","activeFilter","setActiveFilter","skillsReviewReady","skill","review","graphDatas","data","forEach","score","graphLegends","filters","coursedCompletedData","coursesCompleted","reduce","sum","questionsAnsweredData","questionsAnswered","learningHoursData","learningHours","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","TooltipContent","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","skillFilterContainer","map","index","handleFilterClick","skillListContainer","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","completedCourses","arrayOf","objectOf","shape","boolean"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {getOr} from 'lodash/fp';\nimport style from './style.css';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\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,\n    label: translate('change_skill_focus'),\n    'data-name': 'change-skill-focus-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'arrows-rotate',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      data-name=\"button-explore-wrapper\"\n    >\n      <ButtonLink {...buttonProps} />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: filter === translate('review') ? '198px' :'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {skills, selectedSkills, skillsStats, skillsLocales, skillsFilters, isLoading, onSkillFocusConfirm, onReviewSkill, onExploreSkill} = props;\n  const {translate} = context;\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);\n  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() =>  {\n    return skills.filter(skill => skillsFilters[skill].review);\n  }, [skills, skillsFilters]);\n\n  const graphDatas = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsStats[skill].score));\n    return data;\n  }, [selectedSkillsList, skillsStats]);\n\n  const graphLegends = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsLocales[skill]));\n    return data;\n  }, [selectedSkillsList, skillsLocales]);\n\n  const filters = [\n    {\n      name: 'all',\n      skills: skills,\n    }, \n    {\n      name: 'review',\n      skills: skillsReviewReady,\n    }\n  ]\n\n  const coursedCompletedData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].coursesCompleted\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const questionsAnsweredData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].questionsAnswered\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const learningHoursData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].learningHours\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const skillChartPaneLegends = useMemo(\n    () => translate('on', {focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')}),\n    [translate, skillsLocales, skillFocusSelected]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('courses_completed'),\n      value: coursedCompletedData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('questions_answered'),\n      value: questionsAnsweredData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    },\n    {\n      title: translate('learning_hours'),\n      value: learningHoursData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => setSkillFocusSelected(skillRef),\n    [setSkillFocusSelected]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList)\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('Choose 1 Skill')}</li>\n          <li>{translate('Answer 5 Questions')}</li>\n          <li>{translate('You have Infinite Lives')}</li>\n          <li>{translate('Get it all right')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.container}>\n      <SkillPickerModal\n        skills={skills}\n        selectedSkills={selectedSkillsList}\n        skillsLocales={skillsLocales}\n        isOpen={open}\n        isLoading={isLoading}\n        onCancel={handleCloseSkillPicker}\n        onConfirm={handleConfirmSkillPicker}\n        onClose={handleCloseSkillPicker}\n      />\n      <div className={style.skillFocusContainer}>\n        <header className={style.skillFocusHeader}>\n          <div className={style.skillFocusHeaderWrapper}>\n            <div className={style.skillFocusHeaderIcon}>\n              <Icon\n                iconName=\"bullseye-arrow\"\n                backgroundColor=\"#DDD1FF\"\n                borderRadius=\"12px\"\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n            <div className={style.skillFocusHeaderContent}>\n              <div className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n              <div className={style.skillFocusHeaderDescription}>\n                {translate('skills_focus_description')}\n              </div>\n            </div>\n          </div>\n            {selectedSkillsList.length > 0 ? (\n              <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n            ) : null}\n        </header>\n        {selectedSkillsList.length > 0 ? (\n          <div className={style.skillFocusContent}>\n            <div className={style.radarContainer}>\n              <ResponsiveLearningProfileRadarChart\n                totalDataset={1}\n                height={424}\n                width={680}\n                data={graphDatas}\n                legend={graphLegends}\n                onClick={handleOnDotClick}\n                colors={[\n                  {\n                    gradient: {\n                      fill: ['#0062ffff', '#8000ff85'],\n                      stroke: ['#0062ffff', '#8000FF']\n                    },\n                    percentage: {\n                      color: '#0061FF',\n                      background:\n                        'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\n                    },\n                    label: {\n                      color: '#020202ff'\n                    }\n                  }\n                ]}\n              />\n            </div>\n            <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n          </div>\n        ) : (\n          <div className={style.skillFocusEmpty}>\n            <Picture\n              className={style.img}\n              src={\n                'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg'\n              }\n              alt={'demo'}\n            />\n            <div className={style.skillFocusEmptyTitle}>{translate('skill_focus_empty_title')}</div>\n            <div className={style.skillFocusEmptyDescription}>\n              {translate('skills_focus_empty_description')}\n            </div>\n            <ButtonLink\n              customStyle={{\n                width: '168px'\n              }}\n              type={'primary'}\n              onClick={handleOpenSkillPicker}\n              label={translate('choose_your_focus')}\n            />\n          </div>\n        )}\n      </div>\n      <header className={style.skillListHeader}>\n        <div className={style.skillListHeaderIcon}>\n          <Icon\n            iconName=\"dumbbell\"\n            backgroundColor=\"#FFF9D1\"\n            size={{faSize: 20, wrapperSize: 48}}\n          />\n        </div>\n        <div className={style.skillListHeaderContent}>\n          <div className={style.skillListHeaderTitle}>{translate('skills')}</div>\n          <div className={style.skillListHeaderDescription}>\n            {translate('Explore or review skills')}\n            <ToolTip\n              fontSize={12}\n              iconContainerClassName={style.infoIconTooltip}\n              tooltipClassName={style.tooltip}\n              TooltipContent={TooltipContent}\n              closeToolTipInformationTextAriaLabel={translate(\n                'Press the escape key to close the information text'\n              )}\n            />\n          </div>\n        </div>\n      </header>\n      <div className={style.skillFilterContainer}>\n        {filters.map((filter, index) => {\n          function handleFilterClick() {\n            setActiveFilter(filter.name);\n          }\n\n          return (\n            <div key={index}>\n              <FilterButton\n                active={activeFilter === filter.name}\n                filter={translate(filter.name)}\n                skillTotal={filter.skills.length}\n                onClick={handleFilterClick}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <div className={style.skillListContainer}>\n        {skills.map((skill, index) => {\n          if (activeFilter === 'review' && !skillsFilters[skill].review) return null;\n          function handleReviewSkill() {\n            onReviewSkill(skill);\n          }\n          function handleExploreSkill() {\n            onExploreSkill(skill);\n          }\n          return (\n            <div key={index}>\n              <LearnerSkillCard\n                skillTitle={skillsLocales[skill]}\n                focus={selectedSkills.includes(skill)}\n                metrics={{\n                  skillCourses: skillsStats[skill].courses,\n                  skillQuestions: skillsStats[skill].questionsAnswered,\n                  completedCourses: skillsStats[skill].coursesCompleted\n                }}\n                review={skillsFilters[skill].review}\n                onReviewClick={handleReviewSkill}\n                onExploreClick={handleExploreSkill}\n              />\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsStats: PropTypes.objectOf(\n    PropTypes.shape({\n      score: PropTypes.number,\n      courses: PropTypes.number,\n      coursesCompleted: PropTypes.number,\n      questionsAnswered: PropTypes.number,\n      learningHours: PropTypes.number,\n    })\n  ),\n  skillsFilters: PropTypes.objectOf(\n    PropTypes.shape({\n      review: PropTypes.boolean,\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","style","ChangeSkillFocusButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","icon","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsStats","skillsLocales","skillsFilters","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelected","setSkillFocusSelected","undefined","activeFilter","setActiveFilter","skillsReviewReady","skill","review","graphDatas","data","forEach","score","graphLegends","filters","coursedCompletedData","coursesCompleted","reduce","sum","questionsAnsweredData","questionsAnswered","learningHoursData","learningHours","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","TooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","skillFilterContainer","map","index","handleFilterClick","skillListContainer","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","completedCourses","arrayOf","objectOf","shape","boolean"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {getOr} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\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,\n    label: translate('change_skill_focus'),\n    'data-name': 'change-skill-focus-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'arrows-rotate',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      data-name=\"button-explore-wrapper\"\n    >\n      <ButtonLink {...buttonProps} />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: filter === translate('review') ? '198px' : 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsStats,\n    skillsLocales,\n    skillsFilters,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill\n  } = props;\n  const {translate} = context;\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);\n  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return skills.filter(skill => skillsFilters[skill].review);\n  }, [skills, skillsFilters]);\n\n  const graphDatas = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach(skill => (data[skill] = skillsStats[skill].score));\n    return data;\n  }, [selectedSkillsList, skillsStats]);\n\n  const graphLegends = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach(skill => (data[skill] = skillsLocales[skill]));\n    return data;\n  }, [selectedSkillsList, skillsLocales]);\n\n  const filters = [\n    {\n      name: 'all',\n      skills\n    },\n    {\n      name: 'review',\n      skills: skillsReviewReady\n    }\n  ];\n\n  const coursedCompletedData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].coursesCompleted\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList]\n  );\n\n  const questionsAnsweredData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].questionsAnswered\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList]\n  );\n\n  const learningHoursData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].learningHours\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList]\n  );\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('on', {\n        focusedSkill: skillFocusSelected\n          ? skillsLocales[skillFocusSelected]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelected]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('courses_completed'),\n      value: coursedCompletedData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('questions_answered'),\n      value: questionsAnsweredData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    },\n    {\n      title: translate('learning_hours'),\n      value: learningHoursData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => setSkillFocusSelected(skillRef),\n    [setSkillFocusSelected]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('Choose 1 Skill')}</li>\n          <li>{translate('Answer 5 Questions')}</li>\n          <li>{translate('You have Infinite Lives')}</li>\n          <li>{translate('Get it all right')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        <div className={style.skillFocusContainer}>\n          <header className={style.skillFocusHeader}>\n            <div className={style.skillFocusHeaderWrapper}>\n              <div className={style.skillFocusHeaderIcon}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  borderRadius=\"12px\"\n                  size={{faSize: 20, wrapperSize: 48}}\n                />\n              </div>\n              <div className={style.skillFocusHeaderContent}>\n                <div className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n                <div className={style.skillFocusHeaderDescription}>\n                  {translate('skills_focus_description')}\n                </div>\n              </div>\n            </div>\n            {selectedSkillsList.length > 0 ? (\n              <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n            ) : null}\n          </header>\n          {selectedSkillsList.length > 0 ? (\n            <div className={style.skillFocusContent}>\n              <div className={style.radarContainer}>\n                <ResponsiveLearningProfileRadarChart\n                  totalDataset={1}\n                  height={424}\n                  width={680}\n                  data={graphDatas}\n                  legend={graphLegends}\n                  onClick={handleOnDotClick}\n                  colors={[\n                    {\n                      gradient: {\n                        fill: ['#0062ffff', '#8000ff85'],\n                        stroke: ['#0062ffff', '#8000FF']\n                      },\n                      percentage: {\n                        color: '#0061FF',\n                        background:\n                          'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\n                      },\n                      label: {\n                        color: '#020202ff'\n                      }\n                    }\n                  ]}\n                />\n              </div>\n              <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n            </div>\n          ) : (\n            <div className={style.skillFocusEmpty}>\n              <Picture\n                className={style.img}\n                src={\n                  'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg'\n                }\n                alt={'demo'}\n              />\n              <div className={style.skillFocusEmptyTitle}>\n                {translate('skill_focus_empty_title')}\n              </div>\n              <div className={style.skillFocusEmptyDescription}>\n                {translate('skills_focus_empty_description')}\n              </div>\n              <ButtonLink\n                customStyle={{\n                  width: '168px'\n                }}\n                type={'primary'}\n                onClick={handleOpenSkillPicker}\n                label={translate('choose_your_focus')}\n              />\n            </div>\n          )}\n        </div>\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('Explore or review skills')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={TooltipContent}\n                closeToolTipInformationTextAriaLabel={translate(\n                  'Press the escape key to close the information text'\n                )}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.skillFilterContainer}>\n          {filters.map((filter, index) => {\n            function handleFilterClick() {\n              setActiveFilter(filter.name);\n            }\n\n            return (\n              <div key={index}>\n                <FilterButton\n                  active={activeFilter === filter.name}\n                  filter={translate(filter.name)}\n                  skillTotal={filter.skills.length}\n                  onClick={handleFilterClick}\n                />\n              </div>\n            );\n          })}\n        </div>\n        <div className={style.skillListContainer}>\n          {skills.map((skill, index) => {\n            if (activeFilter === 'review' && !skillsFilters[skill].review) return null;\n            function handleReviewSkill() {\n              onReviewSkill(skill);\n            }\n            function handleExploreSkill() {\n              onExploreSkill(skill);\n            }\n            return (\n              <div key={index}>\n                <LearnerSkillCard\n                  skillTitle={skillsLocales[skill]}\n                  focus={selectedSkills.includes(skill)}\n                  metrics={{\n                    skillCourses: skillsStats[skill].courses,\n                    skillQuestions: skillsStats[skill].questionsAnswered,\n                    completedCourses: skillsStats[skill].coursesCompleted\n                  }}\n                  review={skillsFilters[skill].review}\n                  onReviewClick={handleReviewSkill}\n                  onExploreClick={handleExploreSkill}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsStats: PropTypes.objectOf(\n    PropTypes.shape({\n      score: PropTypes.number,\n      courses: PropTypes.number,\n      coursesCompleted: PropTypes.number,\n      questionsAnswered: PropTypes.number,\n      learningHours: PropTypes.number\n    })\n  ),\n  skillsFilters: PropTypes.objectOf(\n    PropTypes.shape({\n      review: PropTypes.boolean\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":"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"}

package/es/template/my-learning/style.css

@@ -6,6 +6,12 @@
 @value cm_grey_100 from colors;
 @value cm_grey_500 from colors;
 
+.backgroundContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
+
 .container {
   background-color: white;
   font-family: "Gilroy";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAwPjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AA8PjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

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

@@ -352,7 +352,7 @@ const LearningProfileRadarChart = ({
     return () => {
       window.removeEventListener('click', handleClick);
     };
-  }, [activeDot]);
+  }, [activeDot, onClick, setActiveDot]);
 
   function handleOnDotClick(label) {
     const payload = formatedData.find(({

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","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      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 className={style.tickeForeignObject} x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\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]);\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAyBA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAWA;AACA,MAAMA,GAAa,GAAG;EAACC,MAAM,EAAE;IAACC,CAAC,EAAE,CAAC,GAAL;IAAUC,CAAC,EAAE,CAAC;EAAd,CAAT;EAA4BC,SAAS,EAAE,QAAvC;EAAiDC,MAAM,EAAE;AAAzD,CAAtB;AACA,MAAMC,MAAgB,GAAG;EAACL,MAAM,EAAE;IAACC,CAAC,EAAE,CAAC,GAAL;IAAUC,CAAC,EAAE;EAAb,CAAT;EAA2BC,SAAS,EAAE,QAAtC;EAAgDC,MAAM,EAAE;AAAxD,CAAzB;AACA,MAAME,KAAe,GAAG;EAACN,MAAM,EAAE;IAACC,CAAC,EAAE,EAAJ;IAAQC,CAAC,EAAE,CAAC;EAAZ,CAAT;EAA0BC,SAAS,EAAE,OAArC;EAA8CI,WAAW,EAAE;AAA3D,CAAxB;AACA,MAAMC,IAAc,GAAG;EAACR,MAAM,EAAE;IAACC,CAAC,EAAE,CAAC,GAAL;IAAUC,CAAC,EAAE,CAAC;EAAd,CAAT;EAA4BC,SAAS,EAAE,KAAvC;EAA8CM,UAAU,EAAE;AAA1D,CAAvB;AAEA;;AACA,MAAMC,KAAK,GAAG,WAAd;AACA,MAAMC,KAAK,GAAG,WAAd;AACA,MAAMC,kBAAkB,GAAG,WAA3B;AAEA,MAAMC,cAAkC,GAAG;EACzCC,QAAQ,EAAE;IACRC,IAAI,EAAE,CAACH,kBAAD,EAAqBA,kBAArB,CADE;IAERI,MAAM,EAAE,CAACJ,kBAAD,EAAqBA,kBAArB;EAFA,CAD+B;EAKzCK,UAAU,EAAE;IACVC,KAAK,EAAER,KADG;IAEVS,UAAU,EAAER;EAFF,CAL6B;EASzCS,KAAK,EAAE;IACLF,KAAK,EAAER;EADF;AATkC,CAA3C;AAcA,MAAMW,aAAa,GAAG;EACpBC,QAAQ,EAAE;IACRC,IAAI,EAAE,UADE;IAERC,KAAK,EAAE,CAACzB,GAAD,EAAMO,KAAN,EAAaE,IAAb,CAFC;IAGRiB,SAAS,EAAE;EAHH,CADU;EAMpBC,aAAa,EAAE;IACbH,IAAI,EAAE,eADO;IAEbC,KAAK,EAAE,CAACzB,GAAD,EAAMO,KAAN,EAAaD,MAAb,EAAqBG,IAArB,CAFM;IAGbiB,SAAS,EAAE;EAHE,CANK;EAWpBE,QAAQ,EAAE;IACRJ,IAAI,EAAE,UADE;IAERC,KAAK,EAAE,CAACzB,GAAD,EAAMO,KAAN,EAAaA,KAAb,EAAoBE,IAApB,EAA0BA,IAA1B,CAFC;IAGRiB,SAAS,EAAE;EAHH,CAXU;EAgBpBG,OAAO,EAAE;IACPL,IAAI,EAAE,SADC;IAEPC,KAAK,EAAE,CAACzB,GAAD,EAAMO,KAAN,EAAaA,KAAb,EAAoBD,MAApB,EAA4BG,IAA5B,EAAkCA,IAAlC,CAFA;IAGPiB,SAAS,EAAE;EAHJ;AAhBW,CAAtB;AAuBA,MAAMI,iBAAiB,GAAG;EACxBC,WAAW,EAAE,CADW;EAExBC,aAAa,EAAE,GAFS;EAGxBhB,IAAI,EAAE,MAHkB;EAIxBiB,CAAC,EAAE,CAJqB;EAKxBC,aAAa,EAAE,KALS;EAMxBC,KAAK,EAAE;IAACC,MAAM,EAAE;EAAT;AANiB,CAA1B;AASA,MAAMC,gBAAgB,GAAG;EACvBrB,IAAI,EAAE,MADiB;EAEvBiB,CAAC,EAAE,CAFoB;EAGvBF,WAAW,EAAE,CAHU;EAIvBC,aAAa,EAAE;AAJQ,CAAzB;AAOA,MAAMM,mBAAmB,GAAG;EAC1BP,WAAW,EAAE,CADa;EAE1BC,aAAa,EAAE,GAFW;EAG1BO,WAAW,EAAE;AAHa,CAA5B;AAMA;;AACA,MAAMC,QAAQ,GAAG,CAAC;EAACC,IAAD;EAAOC,MAAM,EAAE,CAACC,UAAD,EAAaC,WAAb;AAAf,CAAD,kBACf,wDACE;EAAgB,EAAE,EAAG,YAAWH,IAAK,EAArC;EAAwC,EAAE,EAAC,IAA3C;EAAgD,EAAE,EAAC,IAAnD;EAAwD,EAAE,EAAC,IAA3D;EAAgE,EAAE,EAAC;AAAnE,gBACE;EAAM,MAAM,EAAC,IAAb;EAAkB,SAAS,EAAEE;AAA7B,EADF,eAEE;EAAM,MAAM,EAAC,MAAb;EAAoB,SAAS,EAAEC;AAA/B,EAFF,CADF,CADF;;AASA,MAAMC,aAAa,GAAG,CAAC;EACrBC,MADqB;EAErBC,OAFqB;EAGrB1B;AAHqB,CAAD,KASpByB,MAAM,IAAI,CAAC,CAACC,OAAO,EAAEC,MAArB,gBACE;EAAK,SAAS,EAAEb,cAAA,CAAMc;AAAtB,gBACE;EAAM,SAAS,EAAEd,cAAA,CAAMe;AAAvB,GAAsC7B,KAAtC,CADF,eAEE;EAAM,SAAS,EAAEc,cAAA,CAAMgB;AAAvB,GAAsCJ,OAAO,CAAC,CAAD,CAAP,CAAWK,KAAjD,MAFF,CADF,GAKI,IAdN;;AAgBA,MAAMC,SAAS,GAAG,CAAC;EACjBC,EADiB;EAEjBC,EAFiB;EAGjBR,OAHiB;EAIjBS,UAJiB;EAKjBvC,MALiB;EAMjBwC,SANiB;EAOjBC;AAPiB,CAAD,kBAkBhB,oDAEO5B,iBAFP,EAGQiB,OAAO,EAAEA,OAAT,CAAiBY,OAAjB,KAA6BF,SAAS,EAAEpC,KAAxC,IAAiDgB,gBAHzD;EAIIpB,MAJJ;EAKIqC,EALJ;EAMIC,EANJ;EAOIK,OAAO,EAAEC,CAAC,IAAI;IACZA,CAAC,CAACC,eAAF;IAEA,IAAI,CAACf,OAAO,EAAEvB,IAAd,EAAoB;IACpBgC,UAAU,CAACT,OAAO,CAACvB,IAAT,CAAV;EACD,CAZL;EAaI,aAAakC;AAbjB,GAlBF;;AAoCA,MAAMK,WAAW,GAAG,CAClBC,YADkB,EAElBC,gBAFkB,EAGlBR,SAHkB,KAKlB,qBAAMS,KAAK,IAAI;EACb,MAAMC,OAAO,GAAI,QAAOD,KAAK,GAAG,CAAE,EAAlC;EACA,MAAME,OAAO,GAAI,WAAUF,KAAK,GAAG,CAAE,EAArC;EAEA,oBACE,6BAAC,eAAD,eACM5B,mBADN;IAEE,IAAI,EAAG,sBAAqB4B,KAAM,GAFpC;IAGE,MAAM,EAAG,wBAAuBA,KAAM,GAHxC;IAIE,GAAG,EAAEE,OAJP;IAKE,IAAI,EAAEA,OALR;IAME,OAAO,EAAED,OANX;IAOE,SAAS,eACJ9B,gBADI;MAEPpB,MAAM,EAAG,wBAAuBiD,KAAM;IAF/B,EAPX,CAWE;IACA;IACA;IAbF;IAcE,GAAG,eACD,6BAAC,SAAD;MACE,UAAU,EAAED,gBADd;MAEE,SAAS,EAAER,SAFb;MAGE,OAAO,EAAEU,OAHX;MAIE,MAAM,EAAG,wBAAuBD,KAAM,GAJxC;MAKE,QAAQ,EAAG,OAAME,OAAQ;IAL3B;EAfJ,GADF;AA0BD,CA9BD,EA8BGJ,YA9BH,CALF;;AAqCA,MAAMK,gBAAgB,GAAG,CAAC;EACxBH,KADwB;EAExBhE,CAFwB;EAGxBC,CAHwB;EAIxBmE,iBAJwB;EAKxBjD,KALwB;EAMxBoC,SANwB;EAOxBc,SAPwB;EAQxBC,cARwB;EASxBZ;AATwB,CAAD,KAoBnB;EACJ,MAAMa,kBAAkB,GAAGhB,SAAS,EAAEpC,KAAX,KAAqBA,KAAhD;;EACA,8BAIIC,aAAa,CAACiD,SAAD,CAAb,CAAyB9C,KAAzB,CAA+ByC,KAA/B,CAJJ;EAAA,MAAM;IACJjE,MAAM,EAAE;MAACC,CAAC,EAAEwE,OAAJ;MAAavE,CAAC,EAAEwE;IAAhB,CADJ;IAEJvE;EAFI,CAAN;EAAA,MAGKwE,IAHL;;EAMA,SAASC,YAAT,CAAsBhB,CAAtB,EAA2C;IACzCA,CAAC,CAACC,eAAF;IACAF,OAAO,CAACvC,KAAD,CAAP;EACD;;EAED,oBACE,qDACE;IAAe,SAAS,EAAEc,cAAA,CAAM2C,kBAAhC;IAAoD,CAAC,EAAE5E,CAAC,GAAGwE,OAA3D;IAAoE,CAAC,EAAEvE,CAAC,GAAGwE,OAA3E;IAAoF,KAAK,EAAC,KAA1F;IAAgG,MAAM,EAAC;EAAvG,gBACE;IACE,aAAWtD,KADb;IAEE,OAAO,EAAEwD,YAFX;IAGE,SAAS,EAAE,IAAAE,mBAAA,EAAW5C,cAAA,CAAM6C,WAAjB,EAA8BP,kBAAkB,IAAItC,cAAA,CAAM8C,gBAA1D,CAHb;IAIE,KAAK,eACAL,IADA;MAEHM,UAAU,EAAE9E,SAFT;MAGH+E,SAAS,EAAE/E,SAHR;MAIHgF,OAAO,EAAE,CAAC,uBAAQ3B,SAAR,CAAD,IAAuB,CAACgB,kBAAxB,GAA6C,GAA7C,GAAmD;IAJzD;EAJP,GAWGD,cAAc,CAACa,GAAf,CACC,CAAC;IAACnE,UAAU,EAAE;MAACC,KAAD;MAAQC;IAAR,CAAb;IAAkCC,KAAK,EAAE;MAACF,KAAK,EAAEmE;IAAR;EAAzC,CAAD,EAAgEC,CAAhE,kBACE,6BAAC,eAAD;IAAU,GAAG,EAAEA;EAAf,gBACE;IAAM,SAAS,EAAEpD,cAAA,CAAMqD,SAAvB;IAAkC,KAAK,EAAE;MAACrE,KAAD;MAAQC;IAAR;EAAzC,GACGkD,iBAAiB,CAACiB,CAAD,CADpB,CADF,eAIE;IAAM,SAAS,EAAEpD,cAAA,CAAMsD,SAAvB;IAAkC,KAAK,EAAE;MAACtE,KAAK,EAAEmE;IAAR;EAAzC,GACGjE,KADH,CAJF,CAFH,CAXH,CADF,CADF,CADF;AA8BD,CA/DD;AAiEA;;;AACA,MAAMqE,2BAA2B,GAAG,oBAAK,qBAAM,WAAN,CAAL,EAAyB,yBAAU,MAAV,CAAzB,EAA4CpE,aAA5C,CAApC;AAEA,MAAMqE,YAAoE,GAAG,oBAC3EC,OAAO,IAAI,uBAAQ,CAACA,OAAD,CAAR,CADgE,EAE3EA,OAAO,IAAIA,OAAO,CAACP,GAAR,CAAY,CAACQ,GAAD,EAAcN,CAAd,KAA8C,CAAE,QAAOA,CAAC,GAAG,CAAE,EAAf,EAAkBM,GAAlB,CAA1D,CAFgE,sBAA7E;AAMA;;AACO,MAAMC,UAGU,GAAG,CAACC,MAAD,EAASC,KAAT,KACxB,uCAEE,mBAAI,CAAC,CAACC,GAAD,EAAML,OAAN,CAAD,kBACCD,YAAY,CAACC,OAAD,CADb;EAEFjC,OAAO,EAAEoC,MAAM,CAACE,GAAD;AAFb,EAAJ,CAFF,EAMED,KANF,CAJK;;;;AAYA,MAAME,yBAAyB,GAAG,CAAC;EACxCC,IADwC;EAExCJ,MAFwC;EAGxC/B,YAHwC;EAIxCtB,MAAM,EAAE0D,WAJgC;EAKxCxC,OALwC;EAMxCyC,KANwC;EAOxCC,MAPwC;EAQxCjG;AARwC,CAAD,KASC;EACxC,MAAM,CAACkG,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EACA,MAAM,CAAChD,SAAD,EAAYiD,YAAZ,IAA4B,IAAAD,eAAA,GAAlC;EAEA,MAAMjC,cAAc,GAAG,qBAAMe,CAAC,IAAI;IAChC,IAAI,CAACa,WAAW,EAAEpD,MAAlB,EAA0B,OAAOlC,cAAP;IAE1B,MAAM4B,MAAM,GAAG0D,WAAW,CAACb,CAAD,CAA1B;IACA,OAAO7C,MAAM,GAAGiE,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkB9F,cAAlB,EAAkC4B,MAAlC,CAAH,GAA+C5B,cAA5D;EACD,CALsB,EAKpBkD,YALoB,CAAvB;EAOA,MAAMO,SAA0B,GAAG,IAAAsC,cAAA,EACjC,MAAM,qBAAM,SAAN,EAAiB,oBAAKV,IAAL,CAAjB,EAA6BT,2BAA7B,CAD2B,EAEjC,CAACS,IAAD,CAFiC,CAAnC;EAKA,MAAMW,SAAS,GAAG,IAAAD,cAAA,EAChB,MACErC,cAAc,CAACa,GAAf,CAAmB,CAAC;IAACtE,QAAQ,EAAE;MAACC,IAAD;MAAOC;IAAP;EAAX,CAAD,EAA6BiD,KAA7B,kBACjB;IAAK,GAAG,EAAG,YAAWA,KAAM;EAA5B,gBACE,6BAAC,QAAD;IAAU,IAAI,EAAG,QAAOA,KAAM,EAA9B;IAAiC,MAAM,EAAElD;EAAzC,EADF,eAEE,6BAAC,QAAD;IAAU,IAAI,EAAG,UAASkD,KAAM,EAAhC;IAAmC,MAAM,EAAEjD;EAA3C,EAFF,CADF,CAFc,EAQhB,CAACuD,cAAD,CARgB,CAAlB;EAWA,MAAMuC,SAAS,GAAGC,SAAS,EAAED,SAA7B;EACA,MAAME,SAAS,GAAG,IAAAJ,cAAA,EAAQ,MAAM,IAAAK,uBAAA,EAAYH,SAAZ,CAAd,EAAsC,CAACA,SAAD,CAAtC,CAAlB;EAEA,MAAMI,YAAY,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACrCZ,WAAW,CAACS,SAAD,CAAX;EACD,CAFoB,EAElB,CAACA,SAAD,CAFkB,CAArB;EAIA,IAAAI,gBAAA,EAAU,MAAMF,YAAY,EAA5B,EAAgC,CAACA,YAAD,CAAhC;EAEA,IAAAE,gBAAA,EAAU,MAAM;IACd,MAAMC,WAAW,GAAG,MAAM;MACxBZ,YAAY,CAACa,SAAD,CAAZ;MACA3D,OAAO,CAAC2D,SAAD,CAAP;IACD,CAHD;;IAKA,CAAC,uBAAQ9D,SAAR,CAAD,IAAuB+D,MAAM,CAACC,gBAAP,CAAwB,OAAxB,EAAiCH,WAAjC,CAAvB;IAEA,OAAO,MAAM;MACXE,MAAM,CAACE,mBAAP,CAA2B,OAA3B,EAAoCJ,WAApC;IACD,CAFD;EAGD,CAXD,EAWG,CAAC7D,SAAD,CAXH;;EAaA,SAASQ,gBAAT,CAA0B5C,KAA1B,EAAyC;IACvC,MAAM0B,OAAO,GAAG4E,YAAY,CAACC,IAAb,CAAkB,CAAC;MAACjE;IAAD,CAAD,KAAeA,OAAO,KAAKtC,KAA7C,CAAhB;IACA,IAAI,CAAC0B,OAAL,EAAc;IAEd,MAAMmB,KAAK,GAAGyD,YAAY,CAACE,OAAb,CAAqB9E,OAArB,CAAd;IACA,MAAMoB,OAAO,GAAI,QAAOD,KAAK,GAAG,CAAE,EAAlC;IACA,MAAM4D,QAAQ,GAAG,uBAAQjC,GAAG,IAAIA,GAAG,KAAK9C,OAAO,EAAEY,OAAhC,EAAyCoC,MAAzC,CAAjB;;IAEA,IAAI+B,QAAJ,EAAc;MACZpB,YAAY,CAAC;QACXqB,GAAG,EAAE5D,OADM;QAEXf,KAAK,EAAEL,OAAO,CAACoB,OAAD,CAFH;QAGX9C,KAAK,EAAE0B,OAAO,CAACY;MAHJ,CAAD,CAAZ;MAKAC,OAAO,CAACkE,QAAD,CAAP;IACD;EACF;;EAED,SAASE,iBAAT,CAA2B;IACzB9H,CADyB;IAEzBC,CAFyB;IAGzB4C,OAAO,EAAE;MAACK,KAAK,EAAE/B;IAAR,CAHgB;IAIzB6C;EAJyB,CAA3B,EAUG;IACD,MAAM+D,WAAW,GAAGN,YAAY,CAACC,IAAb,CAAkB,CAAC;MAACjE;IAAD,CAAD,KAAeA,OAAO,KAAKtC,KAA7C,CAApB;IACA,MAAMiD,iBAA2B,GAAG,oBAClC,oBAAK,SAAL,CADkC,EAElC,yBAAUlB,KAAK,IAAK,GAAEA,KAAM,GAA5B,CAFkC,oBAIlC6E,WAJkC,CAApC;IAMA,OAAO5D,gBAAgB,CAAC;MACtBH,KADsB;MAEtBhE,CAFsB;MAGtBC,CAHsB;MAItBmE,iBAJsB;MAKtBjD,KALsB;MAMtBoC,SANsB;MAOtBc,SAPsB;MAQtBC,cARsB;MAStBZ,OAAO,EAAEK;IATa,CAAD,CAAvB;EAWD;;EACD,MAAM0D,YAAY,GAAG,IAAAd,cAAA,EAAQ,MAAMf,UAAU,CAACC,MAAD,EAASI,IAAT,CAAxB,EAAwC,CAACJ,MAAD,EAASI,IAAT,CAAxC,CAArB;EAEA,oBACE,6BAAC,oBAAD;IACE,KAAK,EAAEE,KADT;IAEE,MAAM,EAAEC,MAFV;IAGE,MAAM,EAAEjG,MAAM,KAAKkG,QAAQ,GAAG;MAACvG,GAAG,EAAE;IAAN,CAAH,GAAe;MAACA,GAAG,EAAE;IAAN,CAA5B,CAHhB;IAIE,EAAE,EAAC,KAJL;IAKE,EAAE,EAAC,KALL;IAME,WAAW,EAAC,KANd;IAOE,IAAI,EAAE2H;EAPR,GASGb,SATH,EAUG/C,WAAW,CAACC,YAAD,EAAeC,gBAAf,EAAiCR,SAAjC,CAVd,eAWE,6BAAC,mBAAD;IAAW,eAAe,EAAE,EAA5B;IAAgC,WAAW,EAAE,CAA7C;IAAgD,WAAW,EAAE;EAA7D,EAXF,eAYE,6BAAC,wBAAD;IAAgB,OAAO,EAAC,SAAxB;IAAkC,IAAI,EAAE,CAAC8C,QAAD,IAAayB;EAArD,EAZF,eAaE,6BAAC,yBAAD;IAAiB,IAAI,EAAE,KAAvB;IAA8B,QAAQ,EAAE,KAAxC;IAA+C,MAAM,EAAE,CAAC,CAAD,EAAI,GAAJ;EAAvD,EAbF,EAcGzB,QAAQ,gBAAG,6BAAC,iBAAD;IAAS,MAAM,EAAE,KAAjB;IAAwB,OAAO,eAAE,6BAAC,aAAD;EAAjC,EAAH,GAA4D,IAdvE,CADF;AAkBD,CA9HM;;;;AAgIP,MAAM2B,mCAAmC,GAAIC,KAAD,iBAC1C,6BAAC,6BAAD;EAAqB,KAAK,EAAC,MAA3B;EAAkC,MAAM,EAAC;AAAzC,gBACE,6BAAC,yBAAD,EAA+BA,KAA/B,CADF,CADF;;AAMAjC,yBAAyB,CAACkC,SAA1B,2CAAsCC,yCAAtC;AACAH,mCAAmC,CAACE,SAApC,2CAAgDC,yCAAhD;eAEeH,mC"}
+{"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","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      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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"}

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":";AAQA,gFAsHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AAQA,gFAkIC"}

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

@@ -79,7 +79,7 @@ const SkillPickerModal = (props, context) => {
         disabled: isLoading || isError
       }
     };
-  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills]);
+  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills, minSelectedSkills]);
   if (!isLoading && !skills || !isOpen) return null;
   return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
     title: translate('skill_focus'),

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","filteredSelectedSkillList","filter","ref","push","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 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    () => selectedSkillList.length > maxSelectedSkills,\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 && 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  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills]);\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, focus} = skill;\n                function handleChipClick() {\n                  let filteredSelectedSkillList = [...selectedSkillList];\n                  if (selectedSkillList.includes(skill.skillRef)) {\n                    filteredSelectedSkillList = filteredSelectedSkillList.filter(ref => ref !== skill.skillRef);\n                  } else {\n                    filteredSelectedSkillList.push(skill.skillRef);\n                  }\n                  setSelectedSkillList(filteredSelectedSkillList);\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","replace","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","style","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","filteredSelectedSkillList","filter","ref","push","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 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    () => selectedSkillList.length > maxSelectedSkills,\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, focus} = skill;\n                function handleChipClick() {\n                  let filteredSelectedSkillList = [...selectedSkillList];\n                  if (selectedSkillList.includes(skill.skillRef)) {\n                    filteredSelectedSkillList = filteredSelectedSkillList.filter(\n                      ref => ref !== skill.skillRef\n                    );\n                  } else {\n                    filteredSelectedSkillList.push(skill.skillRef);\n                  }\n                  setSelectedSkillList(filteredSelectedSkillList);\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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"}

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":";AA2GA,mEAoRC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AA2GA,mEAuSC"}

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

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _cssColorFunction = require("css-color-function");
 
-var _style = _interopRequireDefault(require("./style.css"));
-
 var _provider = _interopRequireDefault(require("../../atom/provider"));
 
 var _icon = _interopRequireDefault(require("../../atom/icon"));
@@ -31,6 +29,8 @@ var _skillsChartSideInformationPanel = _interopRequireDefault(require("../../mol
 
 var _learnerSkillCard = _interopRequireDefault(require("../../molecule/learner-skill-card"));
 
+var _style = _interopRequireDefault(require("./style.css"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -155,14 +155,14 @@ const MyLearning = (props, context) => {
   }, [selectedSkillsList, skillsLocales]);
   const filters = [{
     name: 'all',
-    skills: skills
+    skills
   }, {
     name: 'review',
     skills: skillsReviewReady
   }];
-  const coursedCompletedData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].coursesCompleted : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
-  const questionsAnsweredData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].questionsAnswered : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
-  const learningHoursData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].learningHours : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const coursedCompletedData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].coursesCompleted : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0), [skillFocusSelected, skillsStats, selectedSkillsList]);
+  const questionsAnsweredData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].questionsAnswered : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0), [skillFocusSelected, skillsStats, selectedSkillsList]);
+  const learningHoursData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].learningHours : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0), [skillFocusSelected, skillsStats, selectedSkillsList]);
   const skillChartPaneLegends = (0, _react.useMemo)(() => translate('on', {
     focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')
   }), [translate, skillsLocales, skillFocusSelected]);
@@ -201,6 +201,8 @@ const MyLearning = (props, context) => {
   }, [onSkillFocusConfirm, setSelectedSkillsList, setOpen]);
   const TooltipContent = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/_react.default.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, translate('Choose 1 Skill')), /*#__PURE__*/_react.default.createElement("li", null, translate('Answer 5 Questions')), /*#__PURE__*/_react.default.createElement("li", null, translate('You have Infinite Lives')), /*#__PURE__*/_react.default.createElement("li", null, translate('Get it all right')))), [translate]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backgroundContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container
   }, /*#__PURE__*/_react.default.createElement(_skillPickerModal.default, {
     skills: skills,
@@ -343,7 +345,7 @@ const MyLearning = (props, context) => {
       onReviewClick: handleReviewSkill,
       onExploreClick: handleExploreSkill
     }));
-  })));
+  }))));
 };
 
 MyLearning.contextTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ChangeSkillFocusButton","props","context","hovered","setHovered","useState","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","buttonProps","customStyle","backgroundColor","convert","color","transition","label","icon","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","style","skillFilterNumber","skillFilterNumberInActive","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsStats","skillsLocales","skillsFilters","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelected","setSkillFocusSelected","undefined","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","review","graphDatas","data","forEach","score","graphLegends","filters","coursedCompletedData","coursesCompleted","reduce","sum","questionsAnsweredData","questionsAnswered","learningHoursData","learningHours","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","TooltipContent","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","skillFilterContainer","map","index","handleFilterClick","skillListContainer","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","completedCourses","arrayOf","objectOf","shape","boolean"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {getOr} from 'lodash/fp';\nimport style from './style.css';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\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,\n    label: translate('change_skill_focus'),\n    'data-name': 'change-skill-focus-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'arrows-rotate',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      data-name=\"button-explore-wrapper\"\n    >\n      <ButtonLink {...buttonProps} />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: filter === translate('review') ? '198px' :'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {skills, selectedSkills, skillsStats, skillsLocales, skillsFilters, isLoading, onSkillFocusConfirm, onReviewSkill, onExploreSkill} = props;\n  const {translate} = context;\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);\n  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() =>  {\n    return skills.filter(skill => skillsFilters[skill].review);\n  }, [skills, skillsFilters]);\n\n  const graphDatas = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsStats[skill].score));\n    return data;\n  }, [selectedSkillsList, skillsStats]);\n\n  const graphLegends = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsLocales[skill]));\n    return data;\n  }, [selectedSkillsList, skillsLocales]);\n\n  const filters = [\n    {\n      name: 'all',\n      skills: skills,\n    }, \n    {\n      name: 'review',\n      skills: skillsReviewReady,\n    }\n  ]\n\n  const coursedCompletedData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].coursesCompleted\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const questionsAnsweredData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].questionsAnswered\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const learningHoursData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].learningHours\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const skillChartPaneLegends = useMemo(\n    () => translate('on', {focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')}),\n    [translate, skillsLocales, skillFocusSelected]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('courses_completed'),\n      value: coursedCompletedData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('questions_answered'),\n      value: questionsAnsweredData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    },\n    {\n      title: translate('learning_hours'),\n      value: learningHoursData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => setSkillFocusSelected(skillRef),\n    [setSkillFocusSelected]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList)\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('Choose 1 Skill')}</li>\n          <li>{translate('Answer 5 Questions')}</li>\n          <li>{translate('You have Infinite Lives')}</li>\n          <li>{translate('Get it all right')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.container}>\n      <SkillPickerModal\n        skills={skills}\n        selectedSkills={selectedSkillsList}\n        skillsLocales={skillsLocales}\n        isOpen={open}\n        isLoading={isLoading}\n        onCancel={handleCloseSkillPicker}\n        onConfirm={handleConfirmSkillPicker}\n        onClose={handleCloseSkillPicker}\n      />\n      <div className={style.skillFocusContainer}>\n        <header className={style.skillFocusHeader}>\n          <div className={style.skillFocusHeaderWrapper}>\n            <div className={style.skillFocusHeaderIcon}>\n              <Icon\n                iconName=\"bullseye-arrow\"\n                backgroundColor=\"#DDD1FF\"\n                borderRadius=\"12px\"\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n            <div className={style.skillFocusHeaderContent}>\n              <div className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n              <div className={style.skillFocusHeaderDescription}>\n                {translate('skills_focus_description')}\n              </div>\n            </div>\n          </div>\n            {selectedSkillsList.length > 0 ? (\n              <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n            ) : null}\n        </header>\n        {selectedSkillsList.length > 0 ? (\n          <div className={style.skillFocusContent}>\n            <div className={style.radarContainer}>\n              <ResponsiveLearningProfileRadarChart\n                totalDataset={1}\n                height={424}\n                width={680}\n                data={graphDatas}\n                legend={graphLegends}\n                onClick={handleOnDotClick}\n                colors={[\n                  {\n                    gradient: {\n                      fill: ['#0062ffff', '#8000ff85'],\n                      stroke: ['#0062ffff', '#8000FF']\n                    },\n                    percentage: {\n                      color: '#0061FF',\n                      background:\n                        'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\n                    },\n                    label: {\n                      color: '#020202ff'\n                    }\n                  }\n                ]}\n              />\n            </div>\n            <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n          </div>\n        ) : (\n          <div className={style.skillFocusEmpty}>\n            <Picture\n              className={style.img}\n              src={\n                'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg'\n              }\n              alt={'demo'}\n            />\n            <div className={style.skillFocusEmptyTitle}>{translate('skill_focus_empty_title')}</div>\n            <div className={style.skillFocusEmptyDescription}>\n              {translate('skills_focus_empty_description')}\n            </div>\n            <ButtonLink\n              customStyle={{\n                width: '168px'\n              }}\n              type={'primary'}\n              onClick={handleOpenSkillPicker}\n              label={translate('choose_your_focus')}\n            />\n          </div>\n        )}\n      </div>\n      <header className={style.skillListHeader}>\n        <div className={style.skillListHeaderIcon}>\n          <Icon\n            iconName=\"dumbbell\"\n            backgroundColor=\"#FFF9D1\"\n            size={{faSize: 20, wrapperSize: 48}}\n          />\n        </div>\n        <div className={style.skillListHeaderContent}>\n          <div className={style.skillListHeaderTitle}>{translate('skills')}</div>\n          <div className={style.skillListHeaderDescription}>\n            {translate('Explore or review skills')}\n            <ToolTip\n              fontSize={12}\n              iconContainerClassName={style.infoIconTooltip}\n              tooltipClassName={style.tooltip}\n              TooltipContent={TooltipContent}\n              closeToolTipInformationTextAriaLabel={translate(\n                'Press the escape key to close the information text'\n              )}\n            />\n          </div>\n        </div>\n      </header>\n      <div className={style.skillFilterContainer}>\n        {filters.map((filter, index) => {\n          function handleFilterClick() {\n            setActiveFilter(filter.name);\n          }\n\n          return (\n            <div key={index}>\n              <FilterButton\n                active={activeFilter === filter.name}\n                filter={translate(filter.name)}\n                skillTotal={filter.skills.length}\n                onClick={handleFilterClick}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <div className={style.skillListContainer}>\n        {skills.map((skill, index) => {\n          if (activeFilter === 'review' && !skillsFilters[skill].review) return null;\n          function handleReviewSkill() {\n            onReviewSkill(skill);\n          }\n          function handleExploreSkill() {\n            onExploreSkill(skill);\n          }\n          return (\n            <div key={index}>\n              <LearnerSkillCard\n                skillTitle={skillsLocales[skill]}\n                focus={selectedSkills.includes(skill)}\n                metrics={{\n                  skillCourses: skillsStats[skill].courses,\n                  skillQuestions: skillsStats[skill].questionsAnswered,\n                  completedCourses: skillsStats[skill].coursesCompleted\n                }}\n                review={skillsFilters[skill].review}\n                onReviewClick={handleReviewSkill}\n                onExploreClick={handleExploreSkill}\n              />\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsStats: PropTypes.objectOf(\n    PropTypes.shape({\n      score: PropTypes.number,\n      courses: PropTypes.number,\n      coursesCompleted: PropTypes.number,\n      questionsAnswered: PropTypes.number,\n      learningHours: PropTypes.number,\n    })\n  ),\n  skillsFilters: PropTypes.objectOf(\n    PropTypes.shape({\n      review: PropTypes.boolean,\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ChangeSkillFocusButton","props","context","hovered","setHovered","useState","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","buttonProps","customStyle","backgroundColor","convert","color","transition","label","icon","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","style","skillFilterNumber","skillFilterNumberInActive","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsStats","skillsLocales","skillsFilters","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelected","setSkillFocusSelected","undefined","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","review","graphDatas","data","forEach","score","graphLegends","filters","coursedCompletedData","coursesCompleted","reduce","sum","questionsAnsweredData","questionsAnswered","learningHoursData","learningHours","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","TooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","skillFilterContainer","map","index","handleFilterClick","skillListContainer","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","completedCourses","arrayOf","objectOf","shape","boolean"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {getOr} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\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,\n    label: translate('change_skill_focus'),\n    'data-name': 'change-skill-focus-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'arrows-rotate',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      data-name=\"button-explore-wrapper\"\n    >\n      <ButtonLink {...buttonProps} />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: filter === translate('review') ? '198px' : 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsStats,\n    skillsLocales,\n    skillsFilters,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill\n  } = props;\n  const {translate} = context;\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);\n  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return skills.filter(skill => skillsFilters[skill].review);\n  }, [skills, skillsFilters]);\n\n  const graphDatas = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach(skill => (data[skill] = skillsStats[skill].score));\n    return data;\n  }, [selectedSkillsList, skillsStats]);\n\n  const graphLegends = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach(skill => (data[skill] = skillsLocales[skill]));\n    return data;\n  }, [selectedSkillsList, skillsLocales]);\n\n  const filters = [\n    {\n      name: 'all',\n      skills\n    },\n    {\n      name: 'review',\n      skills: skillsReviewReady\n    }\n  ];\n\n  const coursedCompletedData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].coursesCompleted\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList]\n  );\n\n  const questionsAnsweredData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].questionsAnswered\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList]\n  );\n\n  const learningHoursData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].learningHours\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList]\n  );\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('on', {\n        focusedSkill: skillFocusSelected\n          ? skillsLocales[skillFocusSelected]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelected]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('courses_completed'),\n      value: coursedCompletedData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('questions_answered'),\n      value: questionsAnsweredData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    },\n    {\n      title: translate('learning_hours'),\n      value: learningHoursData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => setSkillFocusSelected(skillRef),\n    [setSkillFocusSelected]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('Choose 1 Skill')}</li>\n          <li>{translate('Answer 5 Questions')}</li>\n          <li>{translate('You have Infinite Lives')}</li>\n          <li>{translate('Get it all right')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        <div className={style.skillFocusContainer}>\n          <header className={style.skillFocusHeader}>\n            <div className={style.skillFocusHeaderWrapper}>\n              <div className={style.skillFocusHeaderIcon}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  borderRadius=\"12px\"\n                  size={{faSize: 20, wrapperSize: 48}}\n                />\n              </div>\n              <div className={style.skillFocusHeaderContent}>\n                <div className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n                <div className={style.skillFocusHeaderDescription}>\n                  {translate('skills_focus_description')}\n                </div>\n              </div>\n            </div>\n            {selectedSkillsList.length > 0 ? (\n              <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n            ) : null}\n          </header>\n          {selectedSkillsList.length > 0 ? (\n            <div className={style.skillFocusContent}>\n              <div className={style.radarContainer}>\n                <ResponsiveLearningProfileRadarChart\n                  totalDataset={1}\n                  height={424}\n                  width={680}\n                  data={graphDatas}\n                  legend={graphLegends}\n                  onClick={handleOnDotClick}\n                  colors={[\n                    {\n                      gradient: {\n                        fill: ['#0062ffff', '#8000ff85'],\n                        stroke: ['#0062ffff', '#8000FF']\n                      },\n                      percentage: {\n                        color: '#0061FF',\n                        background:\n                          'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\n                      },\n                      label: {\n                        color: '#020202ff'\n                      }\n                    }\n                  ]}\n                />\n              </div>\n              <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n            </div>\n          ) : (\n            <div className={style.skillFocusEmpty}>\n              <Picture\n                className={style.img}\n                src={\n                  'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg'\n                }\n                alt={'demo'}\n              />\n              <div className={style.skillFocusEmptyTitle}>\n                {translate('skill_focus_empty_title')}\n              </div>\n              <div className={style.skillFocusEmptyDescription}>\n                {translate('skills_focus_empty_description')}\n              </div>\n              <ButtonLink\n                customStyle={{\n                  width: '168px'\n                }}\n                type={'primary'}\n                onClick={handleOpenSkillPicker}\n                label={translate('choose_your_focus')}\n              />\n            </div>\n          )}\n        </div>\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('Explore or review skills')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={TooltipContent}\n                closeToolTipInformationTextAriaLabel={translate(\n                  'Press the escape key to close the information text'\n                )}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.skillFilterContainer}>\n          {filters.map((filter, index) => {\n            function handleFilterClick() {\n              setActiveFilter(filter.name);\n            }\n\n            return (\n              <div key={index}>\n                <FilterButton\n                  active={activeFilter === filter.name}\n                  filter={translate(filter.name)}\n                  skillTotal={filter.skills.length}\n                  onClick={handleFilterClick}\n                />\n              </div>\n            );\n          })}\n        </div>\n        <div className={style.skillListContainer}>\n          {skills.map((skill, index) => {\n            if (activeFilter === 'review' && !skillsFilters[skill].review) return null;\n            function handleReviewSkill() {\n              onReviewSkill(skill);\n            }\n            function handleExploreSkill() {\n              onExploreSkill(skill);\n            }\n            return (\n              <div key={index}>\n                <LearnerSkillCard\n                  skillTitle={skillsLocales[skill]}\n                  focus={selectedSkills.includes(skill)}\n                  metrics={{\n                    skillCourses: skillsStats[skill].courses,\n                    skillQuestions: skillsStats[skill].questionsAnswered,\n                    completedCourses: skillsStats[skill].coursesCompleted\n                  }}\n                  review={skillsFilters[skill].review}\n                  onReviewClick={handleReviewSkill}\n                  onExploreClick={handleExploreSkill}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsStats: PropTypes.objectOf(\n    PropTypes.shape({\n      score: PropTypes.number,\n      courses: PropTypes.number,\n      coursesCompleted: PropTypes.number,\n      questionsAnswered: PropTypes.number,\n      learningHours: PropTypes.number\n    })\n  ),\n  skillsFilters: PropTypes.objectOf(\n    PropTypes.shape({\n      review: PropTypes.boolean\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACjD,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EACA,MAAM;IAACC;EAAD,IAAYL,KAAlB;EACA,MAAM;IAACM,IAAD;IAAOC;EAAP,IAAoBN,OAA1B;EACA,MAAMO,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAzB;EAEA,MAAMG,eAAe,GAAG,IAAAC,kBAAA,EAAY,MAAMP,UAAU,CAAC,IAAD,CAA5B,EAAoC,CAACA,UAAD,CAApC,CAAxB;EAEA,MAAMQ,gBAAgB,GAAG,IAAAD,kBAAA,EAAY,MAAMP,UAAU,CAAC,KAAD,CAA5B,EAAqC,CAACA,UAAD,CAArC,CAAzB;EAEA,MAAMS,WAAW,GAAG;IAClBC,WAAW,EAAE;MACXC,eAAe,EAAEZ,OAAO,GAAGM,gBAAH,GAAsB,IAAAO,yBAAA,EAAS,SAAQP,gBAAiB,WAAlC,CADnC;MAEXQ,KAAK,EAAEd,OAAO,GAAG,SAAH,GAAeM,gBAFlB;MAGXS,UAAU,EAAE;IAHD,CADK;IAMlBZ,OANkB;IAOlBa,KAAK,EAAEX,SAAS,CAAC,oBAAD,CAPE;IAQlB,aAAa,2BARK;IASlBY,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,eADA;QAENR,eAAe,EAAEZ,OAAO,GAAGM,gBAAH,GAAsB,IAAAO,yBAAA,EAAS,SAAQP,gBAAiB,WAAlC,CAFxC;QAGNQ,KAAK,EAAEd,OAAO,GAAG,SAAH,GAAeM,gBAHvB;QAINe,IAAI,EAAE;MAJA;IAFJ;EATY,CAApB;EAoBA,oBACE;IACE,WAAW,EAAEd,eADf;IAEE,YAAY,EAAEE,gBAFhB;IAGE,aAAU;EAHZ,gBAKE,6BAAC,mBAAD,EAAgBC,WAAhB,CALF,CADF;AASD,CAvCD;;AAyCAb,sBAAsB,CAACyB,YAAvB,GAAsC;EACpCjB,SAAS,EAAEkB,iBAAA,CAASC,iBAAT,CAA2BnB;AADF,CAAtC;AAIAR,sBAAsB,CAAC4B,SAAvB,2CAAmC;EACjCtB,OAAO,EAAEuB,kBAAA,CAAUC;AADc,CAAnC;;AAIA,MAAMC,YAAY,GAAG,CAAC9B,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IAAC8B,MAAD;IAASC,MAAT;IAAiBC,UAAjB;IAA6B5B;EAA7B,IAAwCL,KAA9C;EACA,MAAM;IAACM,IAAD;IAAOC;EAAP,IAAoBN,OAA1B;EACA,MAAMO,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAzB;EAEA,MAAM4B,OAAO,GAAG,IAAAxB,kBAAA,EACd,mBACE,0CACGsB,MADH,eAEE;IAAM,SAAS,EAAED,MAAM,GAAGI,cAAA,CAAMC,iBAAT,GAA6BD,cAAA,CAAME;EAA1D,GACGJ,UADH,CAFF,CAFY,EASd,CAACD,MAAD,EAASC,UAAT,EAAqBF,MAArB,CATc,CAAhB;EAYA,MAAMnB,WAAW,GAAG;IAClBC,WAAW,EAAE;MACXC,eAAe,EAAEiB,MAAM,GAAG,IAAAhB,yBAAA,EAAS,SAAQP,gBAAiB,WAAlC,CAAH,GAAmD,SAD/D;MAEXQ,KAAK,EAAEe,MAAM,GAAGvB,gBAAH,GAAsB,SAFxB;MAGXS,UAAU,EAAE,6DAHD;MAIXqB,KAAK,EAAEN,MAAM,KAAKzB,SAAS,CAAC,QAAD,CAApB,GAAiC,OAAjC,GAA2C;IAJvC,CADK;IAOlBF,OAPkB;IAQlBkC,OAAO,eAAE,6BAAC,OAAD,OARS;IASlB,aAAa;EATK,CAApB;EAYA,oBAAO,6BAAC,mBAAD,EAAgB3B,WAAhB,CAAP;AACD,CA9BD;;AAgCAkB,YAAY,CAACN,YAAb,GAA4B;EAC1BjB,SAAS,EAAEkB,iBAAA,CAASC,iBAAT,CAA2BnB;AADZ,CAA5B;AAIAuB,YAAY,CAACH,SAAb,2CAAyB;EACvBI,MAAM,EAAEH,kBAAA,CAAUY,IADK;EAEvBR,MAAM,EAAEJ,kBAAA,CAAUa,MAFK;EAGvBR,UAAU,EAAEL,kBAAA,CAAUc,MAHC;EAIvBrC,OAAO,EAAEuB,kBAAA,CAAUC;AAJI,CAAzB;;AAOA,MAAMc,UAAU,GAAG,CAAC3C,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJ2C,MADI;IAEJC,cAFI;IAGJC,WAHI;IAIJC,aAJI;IAKJC,aALI;IAMJC,SANI;IAOJC,mBAPI;IAQJC,aARI;IASJC;EATI,IAUFpD,KAVJ;EAWA,MAAM;IAACO;EAAD,IAAcN,OAApB;EACA,MAAM,CAACoD,IAAD,EAAOC,OAAP,IAAkB,IAAAlD,eAAA,EAAS,KAAT,CAAxB;EACA,MAAM,CAACmD,kBAAD,EAAqBC,qBAArB,IAA8C,IAAApD,eAAA,EAAS,CAAC,GAAGyC,cAAJ,CAAT,CAApD;EACA,MAAM,CAACY,kBAAD,EAAqBC,qBAArB,IAA8C,IAAAtD,eAAA,EAASuD,SAAT,CAApD;EACA,MAAM,CAACC,YAAD,EAAeC,eAAf,IAAkC,IAAAzD,eAAA,EAAS,KAAT,CAAxC;EAEA,MAAM0D,iBAAiB,GAAG,IAAAC,cAAA,EAAQ,MAAM;IACtC,OAAOnB,MAAM,CAACZ,MAAP,CAAcgC,KAAK,IAAIhB,aAAa,CAACgB,KAAD,CAAb,CAAqBC,MAA5C,CAAP;EACD,CAFyB,EAEvB,CAACrB,MAAD,EAASI,aAAT,CAFuB,CAA1B;EAIA,MAAMkB,UAAU,GAAG,IAAAH,cAAA,EAAQ,MAAM;IAC/B,MAAMI,IAAI,GAAG,EAAb;IACAZ,kBAAkB,CAACa,OAAnB,CAA2BJ,KAAK,IAAKG,IAAI,CAACH,KAAD,CAAJ,GAAclB,WAAW,CAACkB,KAAD,CAAX,CAAmBK,KAAtE;IACA,OAAOF,IAAP;EACD,CAJkB,EAIhB,CAACZ,kBAAD,EAAqBT,WAArB,CAJgB,CAAnB;EAMA,MAAMwB,YAAY,GAAG,IAAAP,cAAA,EAAQ,MAAM;IACjC,MAAMI,IAAI,GAAG,EAAb;IACAZ,kBAAkB,CAACa,OAAnB,CAA2BJ,KAAK,IAAKG,IAAI,CAACH,KAAD,CAAJ,GAAcjB,aAAa,CAACiB,KAAD,CAAhE;IACA,OAAOG,IAAP;EACD,CAJoB,EAIlB,CAACZ,kBAAD,EAAqBR,aAArB,CAJkB,CAArB;EAMA,MAAMwB,OAAO,GAAG,CACd;IACEjD,IAAI,EAAE,KADR;IAEEsB;EAFF,CADc,EAKd;IACEtB,IAAI,EAAE,QADR;IAEEsB,MAAM,EAAEkB;EAFV,CALc,CAAhB;EAWA,MAAMU,oBAAoB,GAAG,IAAAT,cAAA,EAC3B,MACEN,kBAAkB,GACdX,WAAW,CAACW,kBAAD,CAAX,CAAgCgB,gBADlB,GAEdlB,kBAAkB,CAACmB,MAAnB,CAA0B,CAACC,GAAD,EAAMX,KAAN,KAAgBW,GAAG,GAAG7B,WAAW,CAACkB,KAAD,CAAX,CAAmBS,gBAAnE,EAAqF,CAArF,CAJqB,EAK3B,CAAChB,kBAAD,EAAqBX,WAArB,EAAkCS,kBAAlC,CAL2B,CAA7B;EAQA,MAAMqB,qBAAqB,GAAG,IAAAb,cAAA,EAC5B,MACEN,kBAAkB,GACdX,WAAW,CAACW,kBAAD,CAAX,CAAgCoB,iBADlB,GAEdtB,kBAAkB,CAACmB,MAAnB,CAA0B,CAACC,GAAD,EAAMX,KAAN,KAAgBW,GAAG,GAAG7B,WAAW,CAACkB,KAAD,CAAX,CAAmBa,iBAAnE,EAAsF,CAAtF,CAJsB,EAK5B,CAACpB,kBAAD,EAAqBX,WAArB,EAAkCS,kBAAlC,CAL4B,CAA9B;EAQA,MAAMuB,iBAAiB,GAAG,IAAAf,cAAA,EACxB,MACEN,kBAAkB,GACdX,WAAW,CAACW,kBAAD,CAAX,CAAgCsB,aADlB,GAEdxB,kBAAkB,CAACmB,MAAnB,CAA0B,CAACC,GAAD,EAAMX,KAAN,KAAgBW,GAAG,GAAG7B,WAAW,CAACkB,KAAD,CAAX,CAAmBe,aAAnE,EAAkF,CAAlF,CAJkB,EAKxB,CAACtB,kBAAD,EAAqBX,WAArB,EAAkCS,kBAAlC,CALwB,CAA1B;EAQA,MAAMyB,qBAAqB,GAAG,IAAAjB,cAAA,EAC5B,MACExD,SAAS,CAAC,IAAD,EAAO;IACd0E,YAAY,EAAExB,kBAAkB,GAC5BV,aAAa,CAACU,kBAAD,CADe,GAE5BlD,SAAS,CAAC,gBAAD;EAHC,CAAP,CAFiB,EAO5B,CAACA,SAAD,EAAYwC,aAAZ,EAA2BU,kBAA3B,CAP4B,CAA9B;EASA,MAAMyB,oBAAoB,GAAG,CAC3B;IACEC,KAAK,EAAE5E,SAAS,CAAC,mBAAD,CADlB;IAEE6E,KAAK,EAAEZ,oBAFT;IAGEa,MAAM,EAAEL,qBAHV;IAIE7D,IAAI,EAAE;MAACmE,QAAQ,EAAE,iBAAX;MAA8BxE,eAAe,EAAE;IAA/C;EAJR,CAD2B,EAO3B;IACEqE,KAAK,EAAE5E,SAAS,CAAC,oBAAD,CADlB;IAEE6E,KAAK,EAAER,qBAFT;IAGES,MAAM,EAAEL,qBAHV;IAIE7D,IAAI,EAAE;MAACmE,QAAQ,EAAE,iBAAX;MAA8BxE,eAAe,EAAE;IAA/C;EAJR,CAP2B,EAa3B;IACEqE,KAAK,EAAE5E,SAAS,CAAC,gBAAD,CADlB;IAEE6E,KAAK,EAAEN,iBAFT;IAGEO,MAAM,EAAEL,qBAHV;IAIE7D,IAAI,EAAE;MAACmE,QAAQ,EAAE,OAAX;MAAoBxE,eAAe,EAAE;IAArC;EAJR,CAb2B,CAA7B;EAqBA,MAAMyE,gBAAgB,GAAG,IAAA7E,kBAAA,EACvB8E,QAAQ,IAAI9B,qBAAqB,CAAC8B,QAAD,CADV,EAEvB,CAAC9B,qBAAD,CAFuB,CAAzB;EAIA,MAAM+B,qBAAqB,GAAG,IAAA/E,kBAAA,EAAY,MAAM4C,OAAO,CAAC,IAAD,CAAzB,EAAiC,CAACA,OAAD,CAAjC,CAA9B;EACA,MAAMoC,sBAAsB,GAAG,IAAAhF,kBAAA,EAAY,MAAM4C,OAAO,CAAC,KAAD,CAAzB,EAAkC,CAACA,OAAD,CAAlC,CAA/B;EACA,MAAMqC,wBAAwB,GAAG,IAAAjF,kBAAA,EAC/BkF,cAAc,IAAI;IAChBpC,qBAAqB,CAACoC,cAAD,CAArB;IACA1C,mBAAmB,CAAC0C,cAAD,CAAnB;IACAtC,OAAO,CAAC,KAAD,CAAP;EACD,CAL8B,EAM/B,CAACJ,mBAAD,EAAsBM,qBAAtB,EAA6CF,OAA7C,CAN+B,CAAjC;EASA,MAAMuC,cAAc,GAAG,IAAAnF,kBAAA,EACrB,mBACE,uDACE,uDACE,wCAAIH,SAAS,CAAC,4BAAD,CAAb,CADF,CADF,eAIE,wCAAIA,SAAS,CAAC,6BAAD,CAAb,CAJF,eAKE,sDACE,yCAAKA,SAAS,CAAC,gBAAD,CAAd,CADF,eAEE,yCAAKA,SAAS,CAAC,oBAAD,CAAd,CAFF,eAGE,yCAAKA,SAAS,CAAC,yBAAD,CAAd,CAHF,eAIE,yCAAKA,SAAS,CAAC,kBAAD,CAAd,CAJF,CALF,CAFmB,EAerB,CAACA,SAAD,CAfqB,CAAvB;EAkBA,oBACE;IAAK,SAAS,EAAE4B,cAAA,CAAM2D;EAAtB,gBACE;IAAK,SAAS,EAAE3D,cAAA,CAAM4D;EAAtB,gBACE,6BAAC,yBAAD;IACE,MAAM,EAAEnD,MADV;IAEE,cAAc,EAAEW,kBAFlB;IAGE,aAAa,EAAER,aAHjB;IAIE,MAAM,EAAEM,IAJV;IAKE,SAAS,EAAEJ,SALb;IAME,QAAQ,EAAEyC,sBANZ;IAOE,SAAS,EAAEC,wBAPb;IAQE,OAAO,EAAED;EARX,EADF,eAWE;IAAK,SAAS,EAAEvD,cAAA,CAAM6D;EAAtB,gBACE;IAAQ,SAAS,EAAE7D,cAAA,CAAM8D;EAAzB,gBACE;IAAK,SAAS,EAAE9D,cAAA,CAAM+D;EAAtB,gBACE;IAAK,SAAS,EAAE/D,cAAA,CAAMgE;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,YAAY,EAAC,MAHf;IAIE,IAAI,EAAE;MAACC,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAJR,EADF,CADF,eASE;IAAK,SAAS,EAAElE,cAAA,CAAMmE;EAAtB,gBACE;IAAK,SAAS,EAAEnE,cAAA,CAAMoE;EAAtB,GAA8ChG,SAAS,CAAC,aAAD,CAAvD,CADF,eAEE;IAAK,SAAS,EAAE4B,cAAA,CAAMqE;EAAtB,GACGjG,SAAS,CAAC,0BAAD,CADZ,CAFF,CATF,CADF,EAiBGgD,kBAAkB,CAACkD,MAAnB,GAA4B,CAA5B,gBACC,6BAAC,sBAAD;IAAwB,OAAO,EAAEhB;EAAjC,EADD,GAEG,IAnBN,CADF,EAsBGlC,kBAAkB,CAACkD,MAAnB,GAA4B,CAA5B,gBACC;IAAK,SAAS,EAAEtE,cAAA,CAAMuE;EAAtB,gBACE;IAAK,SAAS,EAAEvE,cAAA,CAAMwE;EAAtB,gBACE,6BAAC,kCAAD;IACE,YAAY,EAAE,CADhB;IAEE,MAAM,EAAE,GAFV;IAGE,KAAK,EAAE,GAHT;IAIE,IAAI,EAAEzC,UAJR;IAKE,MAAM,EAAEI,YALV;IAME,OAAO,EAAEiB,gBANX;IAOE,MAAM,EAAE,CACN;MACEqB,QAAQ,EAAE;QACRC,IAAI,EAAE,CAAC,WAAD,EAAc,WAAd,CADE;QAERC,MAAM,EAAE,CAAC,WAAD,EAAc,SAAd;MAFA,CADZ;MAKEC,UAAU,EAAE;QACV/F,KAAK,EAAE,SADG;QAEVgG,UAAU,EACR;MAHQ,CALd;MAUE9F,KAAK,EAAE;QACLF,KAAK,EAAE;MADF;IAVT,CADM;EAPV,EADF,CADF,eA2BE,6BAAC,wCAAD;IAAiC,cAAc,EAAEkE;EAAjD,EA3BF,CADD,gBA+BC;IAAK,SAAS,EAAE/C,cAAA,CAAM8E;EAAtB,gBACE,6BAAC,gBAAD;IACE,SAAS,EAAE9E,cAAA,CAAM+E,GADnB;IAEE,GAAG,EACD,2FAHJ;IAKE,GAAG,EAAE;EALP,EADF,eAQE;IAAK,SAAS,EAAE/E,cAAA,CAAMgF;EAAtB,GACG5G,SAAS,CAAC,yBAAD,CADZ,CARF,eAWE;IAAK,SAAS,EAAE4B,cAAA,CAAMiF;EAAtB,GACG7G,SAAS,CAAC,gCAAD,CADZ,CAXF,eAcE,6BAAC,mBAAD;IACE,WAAW,EAAE;MACX+B,KAAK,EAAE;IADI,CADf;IAIE,IAAI,EAAE,SAJR;IAKE,OAAO,EAAEmD,qBALX;IAME,KAAK,EAAElF,SAAS,CAAC,mBAAD;EANlB,EAdF,CArDJ,CAXF,eAyFE;IAAQ,SAAS,EAAE4B,cAAA,CAAMkF;EAAzB,gBACE;IAAK,SAAS,EAAElF,cAAA,CAAMmF;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAC,UADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MAAClB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAHR,EADF,CADF,eAQE;IAAK,SAAS,EAAElE,cAAA,CAAMoF;EAAtB,gBACE;IAAK,SAAS,EAAEpF,cAAA,CAAMqF;EAAtB,GAA6CjH,SAAS,CAAC,QAAD,CAAtD,CADF,eAEE;IAAK,SAAS,EAAE4B,cAAA,CAAMsF;EAAtB,GACGlH,SAAS,CAAC,0BAAD,CADZ,eAEE,6BAAC,gBAAD;IACE,QAAQ,EAAE,EADZ;IAEE,sBAAsB,EAAE4B,cAAA,CAAMuF,eAFhC;IAGE,gBAAgB,EAAEvF,cAAA,CAAMwF,OAH1B;IAIE,cAAc,EAAE9B,cAJlB;IAKE,oCAAoC,EAAEtF,SAAS,CAC7C,oDAD6C;EALjD,EAFF,CAFF,CARF,CAzFF,eAiHE;IAAK,SAAS,EAAE4B,cAAA,CAAMyF;EAAtB,GACGrD,OAAO,CAACsD,GAAR,CAAY,CAAC7F,MAAD,EAAS8F,KAAT,KAAmB;IAC9B,SAASC,iBAAT,GAA6B;MAC3BlE,eAAe,CAAC7B,MAAM,CAACV,IAAR,CAAf;IACD;;IAED,oBACE;MAAK,GAAG,EAAEwG;IAAV,gBACE,6BAAC,YAAD;MACE,MAAM,EAAElE,YAAY,KAAK5B,MAAM,CAACV,IADlC;MAEE,MAAM,EAAEf,SAAS,CAACyB,MAAM,CAACV,IAAR,CAFnB;MAGE,UAAU,EAAEU,MAAM,CAACY,MAAP,CAAc6D,MAH5B;MAIE,OAAO,EAAEsB;IAJX,EADF,CADF;EAUD,CAfA,CADH,CAjHF,eAmIE;IAAK,SAAS,EAAE5F,cAAA,CAAM6F;EAAtB,GACGpF,MAAM,CAACiF,GAAP,CAAW,CAAC7D,KAAD,EAAQ8D,KAAR,KAAkB;IAC5B,IAAIlE,YAAY,KAAK,QAAjB,IAA6B,CAACZ,aAAa,CAACgB,KAAD,CAAb,CAAqBC,MAAvD,EAA+D,OAAO,IAAP;;IAC/D,SAASgE,iBAAT,GAA6B;MAC3B9E,aAAa,CAACa,KAAD,CAAb;IACD;;IACD,SAASkE,kBAAT,GAA8B;MAC5B9E,cAAc,CAACY,KAAD,CAAd;IACD;;IACD,oBACE;MAAK,GAAG,EAAE8D;IAAV,gBACE,6BAAC,yBAAD;MACE,UAAU,EAAE/E,aAAa,CAACiB,KAAD,CAD3B;MAEE,KAAK,EAAEnB,cAAc,CAACsF,QAAf,CAAwBnE,KAAxB,CAFT;MAGE,OAAO,EAAE;QACPoE,YAAY,EAAEtF,WAAW,CAACkB,KAAD,CAAX,CAAmBqE,OAD1B;QAEPC,cAAc,EAAExF,WAAW,CAACkB,KAAD,CAAX,CAAmBa,iBAF5B;QAGP0D,gBAAgB,EAAEzF,WAAW,CAACkB,KAAD,CAAX,CAAmBS;MAH9B,CAHX;MAQE,MAAM,EAAEzB,aAAa,CAACgB,KAAD,CAAb,CAAqBC,MAR/B;MASE,aAAa,EAAEgE,iBATjB;MAUE,cAAc,EAAEC;IAVlB,EADF,CADF;EAgBD,CAxBA,CADH,CAnIF,CADF,CADF;AAmKD,CAvSD;;AAySAvF,UAAU,CAACnB,YAAX,GAA0B;EACxBjB,SAAS,EAAEkB,iBAAA,CAASC,iBAAT,CAA2BnB;AADd,CAA1B;AAIAoC,UAAU,CAAChB,SAAX,2CAAuB;EACrBiB,MAAM,EAAEhB,kBAAA,CAAU4G,OAAV,CAAkB5G,kBAAA,CAAUa,MAA5B,CADa;EAErBI,cAAc,EAAEjB,kBAAA,CAAU4G,OAAV,CAAkB5G,kBAAA,CAAUa,MAA5B,CAFK;EAGrBK,WAAW,EAAElB,kBAAA,CAAU6G,QAAV,CACX7G,kBAAA,CAAU8G,KAAV,CAAgB;IACdrE,KAAK,EAAEzC,kBAAA,CAAUc,MADH;IAEd2F,OAAO,EAAEzG,kBAAA,CAAUc,MAFL;IAGd+B,gBAAgB,EAAE7C,kBAAA,CAAUc,MAHd;IAIdmC,iBAAiB,EAAEjD,kBAAA,CAAUc,MAJf;IAKdqC,aAAa,EAAEnD,kBAAA,CAAUc;EALX,CAAhB,CADW,CAHQ;EAYrBM,aAAa,EAAEpB,kBAAA,CAAU6G,QAAV,CACb7G,kBAAA,CAAU8G,KAAV,CAAgB;IACdzE,MAAM,EAAErC,kBAAA,CAAU+G;EADJ,CAAhB,CADa,CAZM;EAiBrB5F,aAAa,EAAEnB,kBAAA,CAAU6G,QAAV,CAAmB7G,kBAAA,CAAUa,MAA7B,CAjBM;EAkBrBQ,SAAS,EAAErB,kBAAA,CAAUY,IAlBA;EAmBrBU,mBAAmB,EAAEtB,kBAAA,CAAUC,IAnBV;EAoBrBsB,aAAa,EAAEvB,kBAAA,CAAUC,IApBJ;EAqBrBuB,cAAc,EAAExB,kBAAA,CAAUC;AArBL,CAAvB;eAwBec,U"}

package/lib/template/my-learning/style.css

@@ -6,6 +6,12 @@
 @value cm_grey_100 from colors;
 @value cm_grey_500 from colors;
 
+.backgroundContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
+
 .container {
   background-color: white;
   font-family: "Gilroy";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.1-alpha.21+e0d295e8b",
+  "version": "11.32.1-alpha.22+4692fdc4d",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -175,5 +175,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "e0d295e8b237bbda24e769cd329dc64019bee956"
+  "gitHead": "4692fdc4d62dd224277c2d241b08d61c4171fdc4"
 }