diff --git a/packages/@coorpacademy-components/package.json b/packages/@coorpacademy-components/package.json
index 7d4c8f2a14..6429944ff6 100644
--- a/packages/@coorpacademy-components/package.json
+++ b/packages/@coorpacademy-components/package.json
@@ -59,6 +59,8 @@
"@coorpacademy/nova-icons": "4.4.2",
"@coorpacademy/react-native-animation": "1.0.3",
"@jwplayer/jwplayer-react": "^1.1.0",
+ "@nivo/core": "^0.85.1",
+ "@nivo/radar": "^0.85.1",
"@types/react": "^17.0.50",
"@types/react-dom": "^17.0.17",
"autoprefixer": "^10.4.12",
@@ -161,7 +163,8 @@
"stylelint-config-standard": "^28.0.0",
"ts-node": "^10.9.1",
"typescript": "^4.8.3",
- "webpack": "^5.74.0"
+ "webpack": "^5.74.0",
+ "webpack-bundle-analyzer": "^4.10.1"
},
"author": "CoorpAcademy",
"browserslist": [
diff --git a/packages/@coorpacademy-components/src/molecule/radar-chart/index.js b/packages/@coorpacademy-components/src/molecule/radar-chart/index.js
new file mode 100644
index 0000000000..6670aa527f
--- /dev/null
+++ b/packages/@coorpacademy-components/src/molecule/radar-chart/index.js
@@ -0,0 +1,320 @@
+/* eslint-disable react/prop-types */
+import React, {useState, useCallback} from 'react';
+import PropTypes from 'prop-types';
+import {ResponsiveRadar, GridLabelProps} from '@nivo/radar';
+
+const findProfile1ValueById = (id, data) => {
+ const entry = data.find(d => d.competency === id);
+ return entry ? entry.profile_1_value : null;
+};
+
+const strokeGradientLayer = ({
+ data,
+ keys,
+ indices,
+ centerX,
+ centerY,
+ angleStep,
+ radiusScale,
+ colorByKey
+}) => {
+ const pathCommands = `${data
+ .map((datum, i) => {
+ const angle = angleStep * i - Math.PI / 2;
+ const value = datum[keys[0]];
+ const radius = radiusScale(value);
+ const x = centerX + Math.cos(angle) * radius;
+ const y = centerY + Math.sin(angle) * radius;
+ return `${i === 0 ? 'M' : 'L'}${x},${y}`;
+ })
+ .join(' ')} Z`;
+
+ return ;
+};
+
+const createCustomDotLayer = (onClickDot, selectedLabelId) => {
+ // eslint-disable-next-line react/display-name, react/prop-types
+ return ({centerX, centerY, radiusScale, angleStep, data, keys}) => {
+ return (
+
+ {data.map((datum, i) => {
+ const angle = angleStep * i - Math.PI / 2;
+ const value = datum[keys[0]];
+ const radius = radiusScale(value);
+ const x = centerX + Math.cos(angle) * radius;
+ const y = centerY + Math.sin(angle) * radius;
+ const isSelected = datum.competency === selectedLabelId;
+
+ return (
+ {
+ onClickDot(datum.competency, event);
+ }}
+ style={{cursor: 'pointer'}}
+ />
+ );
+ })}
+
+ );
+ };
+};
+
+const LabelComponent = ({
+ data,
+ id,
+ x,
+ y,
+ angle,
+ anchor,
+ selectedLabelId,
+ setSelectedLabelId
+}: GridLabelProps) => {
+ const rectWidth = 50;
+ const rectHeight = 20;
+ const isSelected = id === selectedLabelId;
+
+ const handleCloseClick = () => {
+ setSelectedLabelId(null);
+ };
+
+ return (
+
+
+
+
+
+ {findProfile1ValueById(id, data)}
+
+
+ {id}
+
+
+ {isSelected ? (
+
+ ×
+
+ ) : null}
+
+
+ );
+};
+
+const CustomRadarChart = ({data, keys, indexBy}) => {
+ const fillGradient = {
+ id: 'fillGradient',
+ type: 'linearGradient',
+ colors: [
+ {offset: 0, color: '#936BFF', opacity: 0.1},
+ {offset: 100, color: '#0061FF'}
+ ]
+ };
+
+ const strokeGradient = {
+ id: 'strokeGradient',
+ type: 'linearGradient',
+ colors: [
+ {offset: 0, color: '#8000FF', opacity: 0.1},
+ {offset: 41, color: '#8000FF', opacity: 0.7},
+ {offset: 100, color: '#0061FF'}
+ ]
+ };
+
+ const labelGradient = {
+ id: 'labelGradient',
+ type: 'linearGradient',
+ colors: [
+ {offset: 0, color: 'rgba(0, 97, 255, 0.10)'},
+ {offset: 100, color: 'rgba(147, 107, 255, 0.10)'}
+ ]
+ };
+ const [selectedLabelId, setSelectedLabelId] = useState(null);
+
+ const handleDotClick = useCallback((id, event) => {
+ event.stopPropagation();
+ setSelectedLabelId(id);
+ }, []);
+ const handleContainerClick = useCallback(() => {
+ setSelectedLabelId(null);
+ }, []);
+
+ const CustomDotLayer = useCallback(createCustomDotLayer(handleDotClick, selectedLabelId), [
+ handleDotClick,
+ selectedLabelId
+ ]);
+
+ return (
+
+ {
+ return (
+
+ );
+ }}
+ />
+