@coorpacademy/components 11.28.0 → 11.29.0

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;AA+OjB,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;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CA8GpC,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;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;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAiHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

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

@@ -182,11 +182,11 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => _times(index
     // use with the tooltip component
     ,
     dot: /*#__PURE__*/React.createElement(CustomDot, {
-      onDotClick: handleOnDotClick(datakey),
+      onDotClick: handleOnDotClick,
       activeDot: activeDot,
       dataKey: datakey,
       stroke: `url(#gradient-stroke-${index})`,
-      dataName: dataset
+      dataName: `dot-${dataset}`
     })
   }));
 }, totalDataset);
@@ -199,7 +199,8 @@ const buildCustomLabel = ({
   label,
   activeDot,
   chartType,
-  formatedColors
+  formatedColors,
+  onClick
 }) => {
   const isCurrentDotActive = activeDot?.label === label;
 
@@ -213,12 +214,19 @@ const buildCustomLabel = ({
   } = _CHART_CONFIGS$chartT,
         rest = _objectWithoutPropertiesLoose(_CHART_CONFIGS$chartT, _excluded);
 
+  function onLabelClick(e) {
+    e.stopPropagation();
+    onClick(label);
+  }
+
   return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("foreignObject", {
     x: x + offsetX,
     y: y + offsetY,
     width: "200",
     height: "65"
   }, /*#__PURE__*/React.createElement("div", {
+    "data-name": label,
+    onClick: onLabelClick,
     className: classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus),
     style: _extends({}, rest, {
       alignItems: alignment,
@@ -308,21 +316,24 @@ export const LearningProfileRadarChart = ({
     };
   }, [activeDot]);
 
-  function handleOnDotClick(datakey) {
-    return label => {
-      const payload = formatedData.find(data_ => data_.subject === label);
+  function handleOnDotClick(label) {
+    const payload = formatedData.find(({
+      subject
+    }) => subject === label);
+    if (!payload) return;
+    const index = formatedData.indexOf(payload);
+    const datakey = `value${index + 1}`;
 
-      const skillRef = _findKey(val => val === payload?.subject, legend);
+    const skillRef = _findKey(val => val === payload?.subject, legend);
 
-      if (payload && skillRef) {
-        setActiveDot({
-          key: datakey,
-          value: payload[datakey],
-          label: payload.subject
-        });
-        onClick(skillRef);
-      }
-    };
+    if (skillRef) {
+      setActiveDot({
+        key: datakey,
+        value: payload[datakey],
+        label: payload.subject
+      });
+      onClick(skillRef);
+    }
   }
 
   function renderCustomLabel({
@@ -347,7 +358,8 @@ export const LearningProfileRadarChart = ({
       label,
       activeDot,
       chartType,
-      formatedColors
+      formatedColors,
+      onClick: handleOnDotClick
     });
   }
 

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","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","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","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: -65}, 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: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\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      <p>{label}</p>\n      <p>{payload[0].value}%</p>\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: (datakey: string) => (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(datakey)}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={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}: {\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}) => {\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  return (\n    <g>\n      <foreignObject x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n        <div\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}: 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 = () => setActiveDot(undefined);\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot]);\n\n  function handleOnDotClick(datakey: string) {\n    return (label: string) => {\n      const payload = formatedData.find(data_ => data_.subject === label);\n      const skillRef = findKey(val => val === payload?.subject, legend);\n\n      if (payload && skillRef) {\n        setActiveDot({\n          key: datakey,\n          value: payload[datakey],\n          label: payload.subject\n        });\n        onClick(skillRef);\n      }\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    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} 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","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","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: -65}, 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: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\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      <p>{label}</p>\n      <p>{payload[0].value}%</p>\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 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}: 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 = () => setActiveDot(undefined);\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      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} 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/learning-profile-radar-chart/style.css

@@ -46,4 +46,6 @@
     padding: 4px 8px;
     border-radius: 8px;
     width: 100%;
+    padding: 8px 12px;
+    box-sizing: border-box;
 }

package/es/molecule/skills-chart-side-information-item/index.d.ts

@@ -0,0 +1,17 @@
+export default SkillsChartSideInformationItem;
+declare function SkillsChartSideInformationItem({ title, value, legend, icon: iconProps }: {
+    title: any;
+    value: any;
+    legend: any;
+    icon: any;
+}): JSX.Element;
+declare namespace SkillsChartSideInformationItem {
+    namespace propTypes {
+        const icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        const title: PropTypes.Requireable<string>;
+        const value: PropTypes.Requireable<string>;
+        const legend: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/skills-chart-side-information-item/index.d.ts.map

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

package/es/molecule/skills-chart-side-information-item/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import defaults from 'lodash/fp/defaults';
+import Icon from '../../atom/icon';
+import style from './style.css';
+
+const SkillsChartSideInformationItem = ({
+  title,
+  value,
+  legend,
+  icon: iconProps
+}) => /*#__PURE__*/React.createElement("div", {
+  className: style.InformationElement
+}, /*#__PURE__*/React.createElement("div", {
+  className: style.titleContainer
+}, /*#__PURE__*/React.createElement(Icon, defaults({
+  preset: 's'
+}, iconProps)), /*#__PURE__*/React.createElement("div", {
+  className: style.title
+}, title)), /*#__PURE__*/React.createElement("div", {
+  className: style.value
+}, value), /*#__PURE__*/React.createElement("div", {
+  className: style.legend
+}, /*#__PURE__*/React.createElement("span", {
+  // eslint-disable-next-line react/no-danger
+  dangerouslySetInnerHTML: {
+    __html: legend
+  }
+})));
+
+SkillsChartSideInformationItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.shape(Icon.propTypes),
+  title: PropTypes.string,
+  value: PropTypes.string,
+  legend: PropTypes.string
+} : {};
+export default SkillsChartSideInformationItem;
+//# sourceMappingURL=index.js.map

package/es/molecule/skills-chart-side-information-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","defaults","Icon","style","SkillsChartSideInformationItem","title","value","legend","icon","iconProps","InformationElement","titleContainer","preset","__html","propTypes","shape","string"],"sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport defaults from 'lodash/fp/defaults';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SkillsChartSideInformationItem = ({title, value, legend, icon: iconProps}) => (\n  <div className={style.InformationElement}>\n    <div className={style.titleContainer}>\n      <Icon {...defaults({preset: 's'}, iconProps)} />\n      <div className={style.title}>{title}</div>\n    </div>\n    <div className={style.value}>{value}</div>\n    <div className={style.legend}>\n      <span\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: legend}}\n      />\n    </div>\n  </div>\n);\n\nSkillsChartSideInformationItem.propTypes = {\n  icon: PropTypes.shape(Icon.propTypes),\n  title: PropTypes.string,\n  value: PropTypes.string,\n  legend: PropTypes.string\n};\n\nexport default SkillsChartSideInformationItem;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,8BAA8B,GAAG,CAAC;EAACC,KAAD;EAAQC,KAAR;EAAeC,MAAf;EAAuBC,IAAI,EAAEC;AAA7B,CAAD,kBACrC;EAAK,SAAS,EAAEN,KAAK,CAACO;AAAtB,gBACE;EAAK,SAAS,EAAEP,KAAK,CAACQ;AAAtB,gBACE,oBAAC,IAAD,EAAUV,QAAQ,CAAC;EAACW,MAAM,EAAE;AAAT,CAAD,EAAgBH,SAAhB,CAAlB,CADF,eAEE;EAAK,SAAS,EAAEN,KAAK,CAACE;AAAtB,GAA8BA,KAA9B,CAFF,CADF,eAKE;EAAK,SAAS,EAAEF,KAAK,CAACG;AAAtB,GAA8BA,KAA9B,CALF,eAME;EAAK,SAAS,EAAEH,KAAK,CAACI;AAAtB,gBACE;EACE;EACA,uBAAuB,EAAE;IAACM,MAAM,EAAEN;EAAT;AAF3B,EADF,CANF,CADF;;AAgBAH,8BAA8B,CAACU,SAA/B,2CAA2C;EACzCN,IAAI,EAAER,SAAS,CAACe,KAAV,CAAgBb,IAAI,CAACY,SAArB,CADmC;EAEzCT,KAAK,EAAEL,SAAS,CAACgB,MAFwB;EAGzCV,KAAK,EAAEN,SAAS,CAACgB,MAHwB;EAIzCT,MAAM,EAAEP,SAAS,CAACgB;AAJuB,CAA3C;AAOA,eAAeZ,8BAAf"}

package/es/molecule/skills-chart-side-information-item/style.css

@@ -0,0 +1,47 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_50 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+
+.InformationElement {
+  border-radius: 12px;
+  background: cm_grey_50;
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.title {
+  color: cm_grey_500;
+  font-family: Gilroy;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  margin-left: 8px;
+}
+
+.value {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 36px;
+}
+
+.legend {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 20px;
+}

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

@@ -0,0 +1,16 @@
+export default SkillsChartSideInformationPanel;
+declare function SkillsChartSideInformationPanel({ sidePanelItems }: {
+    sidePanelItems?: any[] | undefined;
+}): JSX.Element;
+declare namespace SkillsChartSideInformationPanel {
+    namespace propTypes {
+        const sidePanelItems: PropTypes.Requireable<(PropTypes.InferProps<{
+            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+            title: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+            legend: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,26 @@
+import _map from "lodash/fp/map";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import SkillsChartSideInformationItem from '../skills-chart-side-information-item';
+import style from './style.css';
+
+const SkillsChartSideInformationPanel = ({
+  sidePanelItems = []
+}) => {
+  const sidePanel = _map(sidePanelItemProps => /*#__PURE__*/React.createElement(SkillsChartSideInformationItem, _extends({}, sidePanelItemProps, {
+    key: `side-panel-item-${sidePanelItemProps.title}`
+  })), sidePanelItems);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.sidePanel
+  }, sidePanel);
+};
+
+SkillsChartSideInformationPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+  sidePanelItems: PropTypes.arrayOf(PropTypes.shape(SkillsChartSideInformationItem.propTypes))
+} : {};
+export default SkillsChartSideInformationPanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","SkillsChartSideInformationItem","style","SkillsChartSideInformationPanel","sidePanelItems","sidePanel","sidePanelItemProps","title","propTypes","arrayOf","shape"],"sources":["../../../src/molecule/skills-chart-side-information-panel/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport SkillsChartSideInformationItem from '../skills-chart-side-information-item';\nimport style from './style.css';\n\nconst SkillsChartSideInformationPanel = ({sidePanelItems = []}) => {\n  const sidePanel = map(\n    sidePanelItemProps => (\n      <SkillsChartSideInformationItem\n        {...sidePanelItemProps}\n        key={`side-panel-item-${sidePanelItemProps.title}`}\n      />\n    ),\n    sidePanelItems\n  );\n  return <div className={style.sidePanel}>{sidePanel}</div>;\n};\n\nSkillsChartSideInformationPanel.propTypes = {\n  sidePanelItems: PropTypes.arrayOf(PropTypes.shape(SkillsChartSideInformationItem.propTypes))\n};\n\nexport default SkillsChartSideInformationPanel;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,8BAAP,MAA2C,uCAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,+BAA+B,GAAG,CAAC;EAACC,cAAc,GAAG;AAAlB,CAAD,KAA2B;EACjE,MAAMC,SAAS,GAAG,KAChBC,kBAAkB,iBAChB,oBAAC,8BAAD,eACMA,kBADN;IAEE,GAAG,EAAG,mBAAkBA,kBAAkB,CAACC,KAAM;EAFnD,GAFc,EAOhBH,cAPgB,CAAlB;;EASA,oBAAO;IAAK,SAAS,EAAEF,KAAK,CAACG;EAAtB,GAAkCA,SAAlC,CAAP;AACD,CAXD;;AAaAF,+BAA+B,CAACK,SAAhC,2CAA4C;EAC1CJ,cAAc,EAAEJ,SAAS,CAACS,OAAV,CAAkBT,SAAS,CAACU,KAAV,CAAgBT,8BAA8B,CAACO,SAA/C,CAAlB;AAD0B,CAA5C;AAIA,eAAeL,+BAAf"}

package/es/molecule/skills-chart-side-information-panel/style.css

@@ -0,0 +1,10 @@
+.sidePanel {
+    display: flex;
+    width: 316px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+ }
+ 

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;AA+OjB,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;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CA8GpC,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;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;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAiHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

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

@@ -212,11 +212,11 @@ const buildRadars = (totalDataset, handleOnDotClick, activeDot) => (0, _times2.d
     // use with the tooltip component
     ,
     dot: /*#__PURE__*/_react.default.createElement(CustomDot, {
-      onDotClick: handleOnDotClick(datakey),
+      onDotClick: handleOnDotClick,
       activeDot: activeDot,
       dataKey: datakey,
       stroke: `url(#gradient-stroke-${index})`,
-      dataName: dataset
+      dataName: `dot-${dataset}`
     })
   }));
 }, totalDataset);
@@ -229,7 +229,8 @@ const buildCustomLabel = ({
   label,
   activeDot,
   chartType,
-  formatedColors
+  formatedColors,
+  onClick
 }) => {
   const isCurrentDotActive = activeDot?.label === label;
 
@@ -243,12 +244,19 @@ const buildCustomLabel = ({
   } = _CHART_CONFIGS$chartT,
         rest = _objectWithoutPropertiesLoose(_CHART_CONFIGS$chartT, _excluded);
 
+  function onLabelClick(e) {
+    e.stopPropagation();
+    onClick(label);
+  }
+
   return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("foreignObject", {
     x: x + offsetX,
     y: y + offsetY,
     width: "200",
     height: "65"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": label,
+    onClick: onLabelClick,
     className: (0, _classnames.default)(_style.default.tickWrapper, isCurrentDotActive && _style.default.tickWrapperFocus),
     style: _extends({}, rest, {
       alignItems: alignment,
@@ -337,20 +345,23 @@ const LearningProfileRadarChart = ({
     };
   }, [activeDot]);
 
-  function handleOnDotClick(datakey) {
-    return label => {
-      const payload = formatedData.find(data_ => data_.subject === label);
-      const skillRef = (0, _findKey2.default)(val => val === payload?.subject, legend);
-
-      if (payload && skillRef) {
-        setActiveDot({
-          key: datakey,
-          value: payload[datakey],
-          label: payload.subject
-        });
-        onClick(skillRef);
-      }
-    };
+  function handleOnDotClick(label) {
+    const payload = formatedData.find(({
+      subject
+    }) => subject === label);
+    if (!payload) return;
+    const index = formatedData.indexOf(payload);
+    const datakey = `value${index + 1}`;
+    const skillRef = (0, _findKey2.default)(val => val === payload?.subject, legend);
+
+    if (skillRef) {
+      setActiveDot({
+        key: datakey,
+        value: payload[datakey],
+        label: payload.subject
+      });
+      onClick(skillRef);
+    }
   }
 
   function renderCustomLabel({
@@ -373,7 +384,8 @@ const LearningProfileRadarChart = ({
       label,
       activeDot,
       chartType,
-      formatedColors
+      formatedColors,
+      onClick: handleOnDotClick
     });
   }
 

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","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","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","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: -65}, 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: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\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      <p>{label}</p>\n      <p>{payload[0].value}%</p>\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: (datakey: string) => (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(datakey)}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={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}: {\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}) => {\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  return (\n    <g>\n      <foreignObject x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n        <div\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}: 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 = () => setActiveDot(undefined);\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot]);\n\n  function handleOnDotClick(datakey: string) {\n    return (label: string) => {\n      const payload = formatedData.find(data_ => data_.subject === label);\n      const skillRef = findKey(val => val === payload?.subject, legend);\n\n      if (payload && skillRef) {\n        setActiveDot({\n          key: datakey,\n          value: payload[datakey],\n          label: payload.subject\n        });\n        onClick(skillRef);\n      }\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    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","style","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","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","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: -65}, 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: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\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      <p>{label}</p>\n      <p>{payload[0].value}%</p>\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 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}: 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 = () => setActiveDot(undefined);\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      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} 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/learning-profile-radar-chart/style.css

@@ -46,4 +46,6 @@
     padding: 4px 8px;
     border-radius: 8px;
     width: 100%;
+    padding: 8px 12px;
+    box-sizing: border-box;
 }

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

@@ -0,0 +1,17 @@
+export default SkillsChartSideInformationItem;
+declare function SkillsChartSideInformationItem({ title, value, legend, icon: iconProps }: {
+    title: any;
+    value: any;
+    legend: any;
+    icon: any;
+}): JSX.Element;
+declare namespace SkillsChartSideInformationItem {
+    namespace propTypes {
+        const icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        const title: PropTypes.Requireable<string>;
+        const value: PropTypes.Requireable<string>;
+        const legend: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _defaults = _interopRequireDefault(require("lodash/fp/defaults"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SkillsChartSideInformationItem = ({
+  title,
+  value,
+  legend,
+  icon: iconProps
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.InformationElement
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.titleContainer
+}, /*#__PURE__*/_react.default.createElement(_icon.default, (0, _defaults.default)({
+  preset: 's'
+}, iconProps)), /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.title
+}, title)), /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.value
+}, value), /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.legend
+}, /*#__PURE__*/_react.default.createElement("span", {
+  // eslint-disable-next-line react/no-danger
+  dangerouslySetInnerHTML: {
+    __html: legend
+  }
+})));
+
+SkillsChartSideInformationItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: _propTypes.default.shape(_icon.default.propTypes),
+  title: _propTypes.default.string,
+  value: _propTypes.default.string,
+  legend: _propTypes.default.string
+} : {};
+var _default = SkillsChartSideInformationItem;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SkillsChartSideInformationItem","title","value","legend","icon","iconProps","style","InformationElement","titleContainer","defaults","preset","__html","propTypes","PropTypes","shape","Icon","string"],"sources":["../../../src/molecule/skills-chart-side-information-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport defaults from 'lodash/fp/defaults';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SkillsChartSideInformationItem = ({title, value, legend, icon: iconProps}) => (\n  <div className={style.InformationElement}>\n    <div className={style.titleContainer}>\n      <Icon {...defaults({preset: 's'}, iconProps)} />\n      <div className={style.title}>{title}</div>\n    </div>\n    <div className={style.value}>{value}</div>\n    <div className={style.legend}>\n      <span\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: legend}}\n      />\n    </div>\n  </div>\n);\n\nSkillsChartSideInformationItem.propTypes = {\n  icon: PropTypes.shape(Icon.propTypes),\n  title: PropTypes.string,\n  value: PropTypes.string,\n  legend: PropTypes.string\n};\n\nexport default SkillsChartSideInformationItem;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,8BAA8B,GAAG,CAAC;EAACC,KAAD;EAAQC,KAAR;EAAeC,MAAf;EAAuBC,IAAI,EAAEC;AAA7B,CAAD,kBACrC;EAAK,SAAS,EAAEC,cAAA,CAAMC;AAAtB,gBACE;EAAK,SAAS,EAAED,cAAA,CAAME;AAAtB,gBACE,6BAAC,aAAD,EAAU,IAAAC,iBAAA,EAAS;EAACC,MAAM,EAAE;AAAT,CAAT,EAAwBL,SAAxB,CAAV,CADF,eAEE;EAAK,SAAS,EAAEC,cAAA,CAAML;AAAtB,GAA8BA,KAA9B,CAFF,CADF,eAKE;EAAK,SAAS,EAAEK,cAAA,CAAMJ;AAAtB,GAA8BA,KAA9B,CALF,eAME;EAAK,SAAS,EAAEI,cAAA,CAAMH;AAAtB,gBACE;EACE;EACA,uBAAuB,EAAE;IAACQ,MAAM,EAAER;EAAT;AAF3B,EADF,CANF,CADF;;AAgBAH,8BAA8B,CAACY,SAA/B,2CAA2C;EACzCR,IAAI,EAAES,kBAAA,CAAUC,KAAV,CAAgBC,aAAA,CAAKH,SAArB,CADmC;EAEzCX,KAAK,EAAEY,kBAAA,CAAUG,MAFwB;EAGzCd,KAAK,EAAEW,kBAAA,CAAUG,MAHwB;EAIzCb,MAAM,EAAEU,kBAAA,CAAUG;AAJuB,CAA3C;eAOehB,8B"}

package/lib/molecule/skills-chart-side-information-item/style.css

@@ -0,0 +1,47 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_50 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+
+.InformationElement {
+  border-radius: 12px;
+  background: cm_grey_50;
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.title {
+  color: cm_grey_500;
+  font-family: Gilroy;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  margin-left: 8px;
+}
+
+.value {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 36px;
+}
+
+.legend {
+  color: cm_grey_700;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 20px;
+}

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

@@ -0,0 +1,16 @@
+export default SkillsChartSideInformationPanel;
+declare function SkillsChartSideInformationPanel({ sidePanelItems }: {
+    sidePanelItems?: any[] | undefined;
+}): JSX.Element;
+declare namespace SkillsChartSideInformationPanel {
+    namespace propTypes {
+        const sidePanelItems: PropTypes.Requireable<(PropTypes.InferProps<{
+            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+            title: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+            legend: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _skillsChartSideInformationItem = _interopRequireDefault(require("../skills-chart-side-information-item"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const SkillsChartSideInformationPanel = ({
+  sidePanelItems = []
+}) => {
+  const sidePanel = (0, _map2.default)(sidePanelItemProps => /*#__PURE__*/_react.default.createElement(_skillsChartSideInformationItem.default, _extends({}, sidePanelItemProps, {
+    key: `side-panel-item-${sidePanelItemProps.title}`
+  })), sidePanelItems);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.sidePanel
+  }, sidePanel);
+};
+
+SkillsChartSideInformationPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+  sidePanelItems: _propTypes.default.arrayOf(_propTypes.default.shape(_skillsChartSideInformationItem.default.propTypes))
+} : {};
+var _default = SkillsChartSideInformationPanel;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

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

package/lib/molecule/skills-chart-side-information-panel/style.css

@@ -0,0 +1,10 @@
+.sidePanel {
+    display: flex;
+    width: 316px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+ }
+ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.28.0",
+  "version": "11.29.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -175,5 +175,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "c74fa4d28b4a80bd2ee3253dcac6ad13cdc934ed"
+  "gitHead": "4279931ad4a3013a1c312ff4f950f02f96e2ee8c"
 }