@coorpacademy/components 11.25.0 → 11.27.0

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

@@ -0,0 +1,416 @@
+"use strict";
+
+exports.__esModule = true;
+exports.formatData = exports.default = exports.LearningProfileRadarChart = void 0;
+
+var _findKey2 = _interopRequireDefault(require("lodash/fp/findKey"));
+
+var _flatten2 = _interopRequireDefault(require("lodash/fp/flatten"));
+
+var _times2 = _interopRequireDefault(require("lodash/fp/times"));
+
+var _fromPairs2 = _interopRequireDefault(require("lodash/fp/fromPairs"));
+
+var _omit2 = _interopRequireDefault(require("lodash/fp/omit"));
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _values2 = _interopRequireDefault(require("lodash/fp/values"));
+
+var _toPairs2 = _interopRequireDefault(require("lodash/fp/toPairs"));
+
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
+
+var _mapValues2 = _interopRequireDefault(require("lodash/fp/mapValues"));
+
+var _keyBy2 = _interopRequireDefault(require("lodash/fp/keyBy"));
+
+var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _recharts = require("recharts");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _checkIsMobile = require("../../util/check-is-mobile");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _types = require("./types");
+
+const _excluded = ["offset", "alignment"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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); }
+
+/* TICK_POSITIONS */
+const top = {
+  offset: {
+    x: -100,
+    y: -65
+  },
+  alignment: 'center',
+  margin: 'auto'
+};
+const bottom = {
+  offset: {
+    x: -100,
+    y: 10
+  },
+  alignment: 'center',
+  margin: 'auto'
+};
+const right = {
+  offset: {
+    x: 30,
+    y: -10
+  },
+  alignment: 'start',
+  marginRight: 'auto'
+};
+const left = {
+  offset: {
+    x: -230,
+    y: -10
+  },
+  alignment: 'end',
+  marginLeft: 'auto'
+};
+/* CONSTANTS */
+
+const BLACK = '#000000ff';
+const WHITE = '#ffffffff';
+const DEFAULT_MAIN_COLOR = '#0062ffff';
+const DEFAULT_COLORS = {
+  gradient: {
+    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],
+    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]
+  },
+  percentage: {
+    color: BLACK,
+    background: WHITE
+  },
+  label: {
+    color: BLACK
+  }
+};
+const CHART_CONFIGS = {
+  triangle: {
+    name: 'triangle',
+    ticks: [top, right, left],
+    sideCount: 3
+  },
+  quadrilateral: {
+    name: 'quadrilateral',
+    ticks: [top, right, bottom, left],
+    sideCount: 4
+  },
+  pentagon: {
+    name: 'pentagon',
+    ticks: [top, right, right, left, left],
+    sideCount: 5
+  },
+  hexagon: {
+    name: 'hexagon',
+    ticks: [top, right, right, bottom, left, left],
+    sideCount: 6
+  }
+};
+const DOT_DEFAULT_PROPS = {
+  strokeWidth: 4,
+  strokeOpacity: 0.2,
+  fill: '#fff',
+  r: 8,
+  pointerEvents: 'all',
+  style: {
+    cursor: 'pointer'
+  }
+};
+const DOT_ACTIVE_PROPS = {
+  fill: '#fff',
+  r: 8,
+  strokeWidth: 6,
+  strokeOpacity: 0.5
+};
+const RADAR_DEFAULT_PROPS = {
+  strokeWidth: 6,
+  strokeOpacity: 0.2,
+  fillOpacity: 0.2
+};
+/* COMPONENTS */
+
+const Gradient = ({
+  type,
+  colors: [firstColor, secondColor]
+}) => /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  id: `gradient-${type}`,
+  x1: "0%",
+  y1: "0%",
+  x2: "0%",
+  y2: "100%"
+}, /*#__PURE__*/_react.default.createElement("stop", {
+  offset: "0%",
+  stopColor: firstColor
+}), /*#__PURE__*/_react.default.createElement("stop", {
+  offset: "100%",
+  stopColor: secondColor
+})));
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label
+}) => active && !!payload?.length ? /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.tooltip
+}, /*#__PURE__*/_react.default.createElement("p", null, label), /*#__PURE__*/_react.default.createElement("p", null, payload[0].value, "%")) : null;
+
+const CustomDot = ({
+  cx,
+  cy,
+  payload,
+  onDotClick,
+  stroke,
+  activeDot,
+  dataName
+}) => /*#__PURE__*/_react.default.createElement("circle", _extends({}, DOT_DEFAULT_PROPS, payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS, {
+  stroke,
+  cx,
+  cy,
+  onClick: e => {
+    e.stopPropagation();
+    if (!payload?.name) return;
+    onDotClick(payload.name);
+  },
+  'data-name': dataName
+}));
+
+const buildRadars = (totalDataset, handleOnDotClick, activeDot) => (0, _times2.default)(index => {
+  const datakey = `value${index + 1}`;
+  const dataset = `dataset-${index + 1}`;
+  return /*#__PURE__*/_react.default.createElement(_recharts.Radar, _extends({}, RADAR_DEFAULT_PROPS, {
+    fill: `url(#gradient-fill-${index})`,
+    stroke: `url(#gradient-stroke-${index})`,
+    key: dataset,
+    name: dataset,
+    dataKey: datakey,
+    activeDot: _extends({}, DOT_ACTIVE_PROPS, {
+      stroke: `url(#gradient-stroke-${index})`
+    }) // only on mobile
+    // to handle dot style on hover (convert to click)
+    // use with the tooltip component
+    ,
+    dot: /*#__PURE__*/_react.default.createElement(CustomDot, {
+      onDotClick: handleOnDotClick(datakey),
+      activeDot: activeDot,
+      dataKey: datakey,
+      stroke: `url(#gradient-stroke-${index})`,
+      dataName: dataset
+    })
+  }));
+}, totalDataset);
+
+const buildCustomLabel = ({
+  index,
+  x,
+  y,
+  percentagesValues,
+  label,
+  activeDot,
+  chartType,
+  formatedColors
+}) => {
+  const isCurrentDotActive = activeDot?.label === label;
+
+  const _CHART_CONFIGS$chartT = CHART_CONFIGS[chartType].ticks[index],
+        {
+    offset: {
+      x: offsetX,
+      y: offsetY
+    },
+    alignment
+  } = _CHART_CONFIGS$chartT,
+        rest = _objectWithoutPropertiesLoose(_CHART_CONFIGS$chartT, _excluded);
+
+  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", {
+    className: (0, _classnames.default)(_style.default.tickWrapper, isCurrentDotActive && _style.default.tickWrapperFocus),
+    style: _extends({}, rest, {
+      alignItems: alignment,
+      textAlign: alignment,
+      opacity: !(0, _isEmpty2.default)(activeDot) && !isCurrentDotActive ? 0.3 : 1
+    })
+  }, formatedColors.map(({
+    percentage: {
+      color,
+      background
+    },
+    label: {
+      color: colorLabel
+    }
+  }, i) => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    key: i
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.tickValue,
+    style: {
+      color,
+      background
+    }
+  }, percentagesValues[i]), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.tickLabel,
+    style: {
+      color: colorLabel
+    }
+  }, label))))));
+};
+/* UTILS */
+
+
+const CHART_CONFIGS_BY_SIDE_COUNT = (0, _pipe2.default)((0, _keyBy2.default)('sideCount'), (0, _mapValues2.default)('name'))(CHART_CONFIGS);
+const formatValues = (0, _pipe2.default)(values_ => (0, _flatten2.default)([values_]), values_ => values_.map((val, i) => [`value${i + 1}`, val]), _fromPairs2.default);
+/* this convert incoming component data to rechart data structure */
+
+const formatData = (legend, data_) => (0, _pipe2.default)(_toPairs2.default, (0, _map2.default)(([ref, values_]) => _extends({}, formatValues(values_), {
+  subject: legend[ref]
+})))(data_);
+
+exports.formatData = formatData;
+
+const LearningProfileRadarChart = ({
+  data,
+  legend,
+  totalDataset,
+  colors: colorsProps,
+  onClick,
+  width,
+  height
+}) => {
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  const [activeDot, setActiveDot] = (0, _react.useState)();
+  const formatedColors = (0, _times2.default)(i => {
+    if (!colorsProps?.length) return DEFAULT_COLORS;
+    const colors = colorsProps[i];
+    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;
+  })(totalDataset);
+  const chartType = (0, _react.useMemo)(() => (0, _getOr2.default)('hexagon', (0, _size2.default)(data), CHART_CONFIGS_BY_SIDE_COUNT), [data]);
+  const gradients = (0, _react.useMemo)(() => formatedColors.map(({
+    gradient: {
+      fill,
+      stroke
+    }
+  }, index) => /*#__PURE__*/_react.default.createElement("svg", {
+    key: `gradient-${index}`
+  }, /*#__PURE__*/_react.default.createElement(Gradient, {
+    type: `fill-${index}`,
+    colors: fill
+  }), /*#__PURE__*/_react.default.createElement(Gradient, {
+    type: `stroke-${index}`,
+    colors: stroke
+  }))), [formatedColors]);
+  const userAgent = navigator?.userAgent;
+  const isMobile_ = (0, _react.useMemo)(() => (0, _checkIsMobile.isMobile)(userAgent), [userAgent]);
+  const setIsMobile_ = (0, _react.useCallback)(() => {
+    setIsMobile(isMobile_);
+  }, [isMobile_]);
+  (0, _react.useEffect)(() => setIsMobile_(), [setIsMobile_]);
+  (0, _react.useEffect)(() => {
+    const handleClick = () => setActiveDot(undefined);
+
+    !(0, _isEmpty2.default)(activeDot) && window.addEventListener('click', handleClick);
+    return () => {
+      window.removeEventListener('click', handleClick);
+    };
+  }, [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 renderCustomLabel({
+    x,
+    y,
+    payload: {
+      value: label
+    },
+    index
+  }) {
+    const currentData = formatedData.find(({
+      subject
+    }) => subject === label);
+    const percentagesValues = (0, _pipe2.default)((0, _omit2.default)('subject'), (0, _mapValues2.default)(value => `${value}%`), _values2.default)(currentData);
+    return buildCustomLabel({
+      index,
+      x,
+      y,
+      percentagesValues,
+      label,
+      activeDot,
+      chartType,
+      formatedColors
+    });
+  }
+
+  const formatedData = (0, _react.useMemo)(() => formatData(legend, data), [legend, data]);
+  return /*#__PURE__*/_react.default.createElement(_recharts.RadarChart, {
+    width: width,
+    height: height,
+    cx: "50%",
+    cy: "50%",
+    outerRadius: "80%",
+    data: formatedData
+  }, gradients, buildRadars(totalDataset, handleOnDotClick, activeDot), /*#__PURE__*/_react.default.createElement(_recharts.PolarGrid, {
+    strokeDasharray: 15,
+    strokeWidth: 3,
+    radialLines: false
+  }), /*#__PURE__*/_react.default.createElement(_recharts.PolarAngleAxis, {
+    dataKey: "subject",
+    tick: !isMobile && renderCustomLabel
+  }), /*#__PURE__*/_react.default.createElement(_recharts.PolarRadiusAxis, {
+    tick: false,
+    axisLine: false,
+    domain: [0, 100]
+  }), isMobile ? /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+    cursor: false,
+    content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
+  }) : null);
+};
+
+exports.LearningProfileRadarChart = LearningProfileRadarChart;
+
+const ResponsiveLearningProfileRadarChart = props => /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+  width: "100%",
+  height: "100%"
+}, /*#__PURE__*/_react.default.createElement(LearningProfileRadarChart, props));
+
+LearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? _types.learningProfileRadarChartPropTypes : {};
+ResponsiveLearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? _types.learningProfileRadarChartPropTypes : {};
+var _default = ResponsiveLearningProfileRadarChart;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,49 @@
+@value colors: "../../variables/colors.css";
+@value cm_primary_blue from colors;
+@value cm_grey_50 from colors;
+@value lightDark from colors;
+
+.tickWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    font-family: 'Gilroy';
+    font-weight: 600;
+    padding: 0px 12px;
+    box-sizing: border-box;
+}
+
+.tickWrapperFocus {
+    background-color: cm_grey_50;
+    border-radius: 12px;
+    width: fit-content;
+}
+
+.tickValue {
+    padding: 4px;
+    border-radius: 12px;
+}
+
+.tickLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: normal;
+    width: 100%;
+    width: fit-content;
+}
+
+.tooltip {
+    position: relative;
+    font-family: 'Gilroy';
+    font-weight: 600;
+    background-color: lightDark;
+    color: cm_grey_50;
+    padding: 4px 8px;
+    border-radius: 8px;
+    width: 100%;
+}

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

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+export declare const learningProfileRadarChartPropTypes: {
+    data: PropTypes.Validator<{
+        [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
+    }>;
+    totalDataset: PropTypes.Validator<number>;
+    onDotClick: PropTypes.Requireable<(...args: any[]) => any>;
+    colors: PropTypes.Requireable<(PropTypes.InferProps<{
+        gradient: PropTypes.Requireable<PropTypes.InferProps<{
+            fill: PropTypes.Requireable<(string | null | undefined)[]>;
+            stroke: PropTypes.Requireable<(string | null | undefined)[]>;
+        }>>;
+        percentage: PropTypes.Requireable<PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+            background: PropTypes.Requireable<string>;
+        }>>;
+        label: PropTypes.Requireable<PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+        }>>;
+    }> | null | undefined)[]>;
+    width: PropTypes.Requireable<number>;
+    height: PropTypes.Requireable<number>;
+};
+export declare const customDotPropTypes: {
+    cx: PropTypes.Requireable<number>;
+    cy: PropTypes.Requireable<number>;
+    payload: PropTypes.Requireable<PropTypes.InferProps<{
+        payload: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<number>;
+            subject: PropTypes.Requireable<string>;
+        }>>;
+        name: PropTypes.Requireable<string>;
+    }>>;
+    onDotClick: PropTypes.Requireable<(...args: any[]) => any>;
+    index: PropTypes.Requireable<number>;
+    activeDot: PropTypes.Requireable<PropTypes.InferProps<{
+        label: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<number>;
+        key: PropTypes.Requireable<string>;
+    }>>;
+    dataKey: PropTypes.Requireable<string>;
+    stroke: PropTypes.Requireable<string>;
+};
+export declare const customTooltipPropTypes: {
+    active: PropTypes.Requireable<boolean>;
+    payload: PropTypes.Requireable<(PropTypes.InferProps<{
+        value: PropTypes.Requireable<number>;
+    }> | null | undefined)[]>;
+    label: PropTypes.Requireable<string>;
+};
+export declare const gradientPropTypes: {
+    type: PropTypes.Requireable<string>;
+    colors: PropTypes.Requireable<(string | null | undefined)[]>;
+};
+export declare type ColorType = {
+    gradient?: {
+        fill?: string[];
+        stroke?: string[];
+    };
+    percentage?: {
+        color?: string;
+        background?: string;
+    };
+    label?: {
+        color?: string;
+    };
+};
+export declare type LearningProfileRadarChartPropTypes = {
+    data: {
+        [ref: string]: number | number[];
+    };
+    legend: {
+        [ref: string]: string;
+    };
+    totalDataset: number;
+    onClick: (skillRef: string) => void;
+    colors?: ColorType[];
+    width?: number;
+    height?: number;
+};
+export declare type CustomDotPropTypes = {
+    cx: number;
+    cy: number;
+    payload: {
+        payload: {
+            value: number;
+            subject: string;
+        };
+        name: string;
+    };
+    onDotClick: (name: string) => void;
+    index: number;
+    activeDot?: {
+        label: string;
+        value: number;
+        key: string;
+    };
+    dataKey: string;
+    stroke: string;
+};
+export declare type CustomTooltipPropTypes = {
+    active: boolean;
+    payload: {
+        value: number;
+    }[];
+    label: string;
+};
+export declare type GradientPropTypes = {
+    type: string;
+    colors: string[];
+};
+export declare type TickType = {
+    offset: {
+        x: number;
+        y: number;
+    };
+    alignment: 'center' | 'start' | 'end';
+    margin?: 'auto';
+    marginLeft?: 'auto';
+    marginRight?: 'auto';
+};
+export declare type FormatedColorsType = {
+    gradient: {
+        fill: string[];
+        stroke: string[];
+    };
+    percentage: {
+        color: string;
+        background: string;
+    };
+    label: {
+        color: string;
+    };
+};
+export declare type FormatedDataType = {
+    subject: string;
+} & {
+    [key: string]: number | string;
+};
+export declare type ActiveDotType = {
+    key: string;
+    value: number | string;
+    label: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"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"}