TP-31863 |performance level dynamic| Aman Singh (#466)
* TP-31863 | initial commit | Aman Singh * TP-0000 | Level icon with level number within it and color as prop | Herik * TP-31863 | second commit | Aman Singh * TP-0000 | Level icon implemented in the list with colors | Herik * TP-31863 | third commit | Aman Singh * TP-31863 | forth commit | Aman Singh * TP-31863 | integration done | Aman Singh * TP-31863 | design review done | Aman Singh * TP-31863 | design review done -1 | Aman Singh * TP-31863 | EM review done| Aman Singh * TP-31863 | EM review done -1| Aman Singh * TP-31863 | EM review done| Aman Singh * TP-0000 | maxLevel after UAT | Herik * TP-31863 |removed tooltip sachin suggestion| Aman Singh Co-authored-by: Herik Modi <herik.modi@navi.com>
This commit is contained in:
Aman Singh
committed by
GitHub Enterprise
GitHub Enterprise
parent
8fd5e424fe
commit
a7b475d190
@@ -1,91 +1,139 @@
|
||||
{
|
||||
"agentReferenceId": "4b6cbe75-59f9-4375-89fd-080b26d21b03",
|
||||
"agentLevelRanking": 5,
|
||||
"maxLevel": 7,
|
||||
"cashCollectedInLast30Days": 1117146.44,
|
||||
"firstAllocationDate": "2022-05-03T00:00:00",
|
||||
"cashRequiredToReachNextLevel": 70274.98,
|
||||
"agentReferenceId": "6fb98fe3-db72-41b6-9fe3-58969e19d986",
|
||||
"agentLevelRanking": 9,
|
||||
"maxLevel": 9,
|
||||
"cashCollectedInLast30Days": 4720122.37,
|
||||
"firstAllocationDate": "2022-07-25T00:00:00",
|
||||
"cashRequiredToReachNextLevel": 199513.06,
|
||||
"levelConstructList": [
|
||||
{
|
||||
"level": 1,
|
||||
"levelLowerLimit": 25676.6,
|
||||
"levelUpperLimit": 554464.91
|
||||
"levelLowerLimit": 10263.0,
|
||||
"levelUpperLimit": 600844.86
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"levelLowerLimit": 555717.36,
|
||||
"levelUpperLimit": 876699.78
|
||||
"levelLowerLimit": 601023.92,
|
||||
"levelUpperLimit": 868522.89
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"levelLowerLimit": 882595.22,
|
||||
"levelUpperLimit": 993750.74
|
||||
"levelLowerLimit": 868647.89,
|
||||
"levelUpperLimit": 975410.37
|
||||
},
|
||||
{
|
||||
"level": 4,
|
||||
"levelLowerLimit": 994443.69,
|
||||
"levelUpperLimit": 1094499.45
|
||||
"levelLowerLimit": 975488.35,
|
||||
"levelUpperLimit": 1081223.36
|
||||
},
|
||||
{
|
||||
"level": 5,
|
||||
"levelLowerLimit": 1098591.56,
|
||||
"levelUpperLimit": 1187158.21
|
||||
"levelLowerLimit": 1086032.59,
|
||||
"levelUpperLimit": 1161649.97
|
||||
},
|
||||
{
|
||||
"level": 6,
|
||||
"levelLowerLimit": 1187421.42,
|
||||
"levelUpperLimit": 1301905.05
|
||||
"levelLowerLimit": 1164180.72,
|
||||
"levelUpperLimit": 1295784.61
|
||||
},
|
||||
{
|
||||
"level": 7,
|
||||
"levelLowerLimit": 1302165.74,
|
||||
"levelUpperLimit": 1923532.05
|
||||
"levelLowerLimit": 1298859.54,
|
||||
"levelUpperLimit": 1940339.37
|
||||
},
|
||||
{
|
||||
"level": 8,
|
||||
"levelLowerLimit": 1940344.54,
|
||||
"levelUpperLimit": 2631379.37
|
||||
},
|
||||
{
|
||||
"level": 9,
|
||||
"levelLowerLimit": 2631382.54,
|
||||
"levelUpperLimit": 4720122.37
|
||||
}
|
||||
],
|
||||
"currentMonthCashCollected": [
|
||||
{
|
||||
"label": "EMIs",
|
||||
"value": 893868.68,
|
||||
"valuePercent": 89.95521132199717
|
||||
"value": 383003.99,
|
||||
"valuePercent": 95.3908184628774
|
||||
},
|
||||
{
|
||||
"label": "Fees",
|
||||
"value": 41930.079999999994,
|
||||
"valuePercent": 4.219668158804094
|
||||
"value": 17800.0,
|
||||
"valuePercent": 4.433260783103638
|
||||
},
|
||||
{
|
||||
"label": "Foreclosures",
|
||||
"value": 30392.04,
|
||||
"valuePercent": 3.0585279939628163
|
||||
"value": 0.0,
|
||||
"valuePercent": 0.0
|
||||
},
|
||||
{
|
||||
"label": "Others",
|
||||
"value": 27491.129999999997,
|
||||
"valuePercent": 2.7665925252359167
|
||||
"value": 706.87,
|
||||
"valuePercent": 0.17605275560407127
|
||||
}
|
||||
],
|
||||
"prevMonthCashCollected": [
|
||||
{
|
||||
"label": "EMIs",
|
||||
"value": 810255.89,
|
||||
"valuePercent": 72.28522338317956
|
||||
"value": 0.0,
|
||||
"valuePercent": "NaN"
|
||||
},
|
||||
{
|
||||
"label": "Fees",
|
||||
"value": 56414.66,
|
||||
"valuePercent": 5.032911640032785
|
||||
"value": 0.0,
|
||||
"valuePercent": "NaN"
|
||||
},
|
||||
{
|
||||
"label": "Foreclosures",
|
||||
"value": 184438.37,
|
||||
"valuePercent": 16.454269497355362
|
||||
"value": 0.0,
|
||||
"valuePercent": "NaN"
|
||||
},
|
||||
{
|
||||
"label": "Others",
|
||||
"value": 69806.05,
|
||||
"valuePercent": 6.227595479432307
|
||||
"value": 0.0,
|
||||
"valuePercent": "NaN"
|
||||
}
|
||||
],
|
||||
"totalCurrentMonthCashCollected": 993681.9300000002,
|
||||
"totalPrevMonthCashCollected": 1120914.97
|
||||
"totalCurrentMonthCashCollected": 401510.33,
|
||||
"totalPrevMonthCashCollected": 0.0,
|
||||
"todaysCashCollected": 24344.0,
|
||||
"noOfDaysCashCollected": 30,
|
||||
"dateWhenRankingVisible": "2022-08-23",
|
||||
"monthlyCashCollectedBreakupDropdownOptions": [
|
||||
{
|
||||
"value": "JULY",
|
||||
"label": "July"
|
||||
},
|
||||
{
|
||||
"value": "JUNE",
|
||||
"label": "June"
|
||||
}
|
||||
],
|
||||
"monthlyCashCollected": {
|
||||
"monthlyCashCollectedBreakup": [
|
||||
{
|
||||
"label": "EMIs",
|
||||
"value": 383003.99,
|
||||
"valuePercent": 95.3908184628774
|
||||
},
|
||||
{
|
||||
"label": "Fees",
|
||||
"value": 17800.0,
|
||||
"valuePercent": 4.433260783103638
|
||||
},
|
||||
{
|
||||
"label": "Foreclosures",
|
||||
"value": 0.0,
|
||||
"valuePercent": 0.0
|
||||
},
|
||||
{
|
||||
"label": "Others",
|
||||
"value": 706.87,
|
||||
"valuePercent": 0.17605275560407127
|
||||
}
|
||||
],
|
||||
"totalMonthlyCashCollected": 401510.33
|
||||
}
|
||||
}
|
||||
43
src/assets/icons/LevelIcon.tsx
Normal file
43
src/assets/icons/LevelIcon.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
interface LevelIconProps {
|
||||
level: number;
|
||||
color?: string;
|
||||
fontColor?: string;
|
||||
fontClassName?: string;
|
||||
}
|
||||
|
||||
export const LevelIcon = ({ level = 1, color = '#F3D260', fontColor = '#000', fontClassName }: LevelIconProps) => {
|
||||
return (
|
||||
<div className={fontClassName} style={{ position: 'relative', height: 26, width: 26, cursor: 'default' }}>
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
display: 'inline-block',
|
||||
color: fontColor
|
||||
}}
|
||||
>
|
||||
{level}
|
||||
</span>
|
||||
<svg
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 26 26"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.6438 1.65171C11.8064 1.44835 12.0129 1.28419 12.2477 1.17138C12.4823 1.05857 12.7396 1 13 1C13.2605 1 13.5177 1.05857 13.7524 1.17138C13.9871 1.28419 14.1936 1.44835 14.3562 1.65171L15.9682 3.65785C16.151 3.88532 16.3883 4.06307 16.6579 4.17465C16.9276 4.28624 17.2211 4.32809 17.5112 4.29631L20.0694 4.01777C20.3276 3.99024 20.5888 4.02092 20.8336 4.10754C21.0786 4.19416 21.3009 4.33453 21.4844 4.51834C21.6679 4.70215 21.8079 4.92473 21.8942 5.16974C21.9805 5.41475 22.0106 5.67597 21.9828 5.93419L21.7042 8.49116C21.6726 8.78135 21.7147 9.07482 21.8264 9.34448C21.9382 9.61415 22.1161 9.85131 22.3437 10.0341L24.3489 11.6449C24.552 11.8077 24.7161 12.0141 24.8287 12.2488C24.9415 12.4836 25 12.7407 25 13.001C25 13.2615 24.9415 13.5185 24.8287 13.7533C24.7161 13.988 24.552 14.1944 24.3489 14.3573L22.3437 15.9691C22.1161 16.1516 21.9382 16.3886 21.8264 16.6581C21.7147 16.9276 21.6726 17.2209 21.7042 17.5109L21.9828 20.069C22.011 20.3274 21.9808 20.5889 21.8945 20.8342C21.8083 21.0793 21.668 21.3021 21.4842 21.4859C21.3003 21.6698 21.0776 21.81 20.8324 21.8962C20.5871 21.9825 20.3256 22.0126 20.0673 21.9844L17.5091 21.7058C17.2189 21.6745 16.9255 21.7166 16.6558 21.8283C16.3862 21.9402 16.149 22.1179 15.9661 22.3453L14.3562 24.3483C14.1936 24.5516 13.9871 24.7159 13.7524 24.8286C13.5177 24.9415 13.2605 25 13 25C12.7396 25 12.4823 24.9415 12.2477 24.8286C12.0129 24.7159 11.8064 24.5516 11.6438 24.3483L10.0339 22.3432C9.851 22.1158 9.61381 21.9381 9.34417 21.8262C9.07453 21.7145 8.7811 21.6724 8.49091 21.7037L5.93277 21.9823C5.67434 22.0105 5.41286 21.9804 5.16762 21.8941C4.92237 21.8079 4.69962 21.6677 4.51579 21.4838C4.33196 21.3 4.19174 21.0773 4.10546 20.8321C4.01918 20.5868 3.98906 20.3253 4.0173 20.0669L4.29585 17.5088C4.32741 17.2188 4.28536 16.9255 4.17359 16.6561C4.06181 16.3865 3.8839 16.1495 3.65631 15.967L1.65112 14.3573C1.44792 14.1944 1.28391 13.988 1.17121 13.7533C1.05851 13.5185 1 13.2615 1 13.001C1 12.7407 1.05851 12.4836 1.17121 12.2488C1.28391 12.0141 1.44792 11.8077 1.65112 11.6449L3.65631 10.0341C3.88392 9.85131 4.06181 9.61415 4.17359 9.34448C4.28535 9.07482 4.3274 8.78135 4.29585 8.49116L4.0173 5.93419C3.98929 5.67577 4.01957 5.41435 4.10591 5.16918C4.19225 4.924 4.33247 4.70129 4.51622 4.51744C4.69998 4.33359 4.92262 4.19327 5.16776 4.10679C5.41291 4.02033 5.67431 3.9899 5.93277 4.01777L8.49091 4.29631C8.78104 4.32809 9.0745 4.28624 9.34418 4.17465C9.61386 4.06307 9.85109 3.88532 10.0339 3.65785L11.6438 1.65171Z"
|
||||
fill={color}
|
||||
stroke="white"
|
||||
strokeWidth="0.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
24
src/assets/icons/PerformanceArrow.tsx
Normal file
24
src/assets/icons/PerformanceArrow.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
|
||||
import { IconProps } from './types';
|
||||
|
||||
const PerformanceArrow: React.FC<IconProps> = props => {
|
||||
const { className, style, title } = props;
|
||||
return (
|
||||
// TODO: Use tooltip component instead of title.
|
||||
<svg
|
||||
style={style}
|
||||
className={className}
|
||||
width="21"
|
||||
height="9"
|
||||
viewBox="0 0 21 9"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M9 4.5L2.25 8.39711L2.25 0.602885L9 4.5Z" fill="#0094FF" />
|
||||
<path d="M20 4.49805L8 4.50179" stroke="#3591FE" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default PerformanceArrow;
|
||||
@@ -5,4 +5,7 @@ export interface IconProps {
|
||||
onClick?: () => void;
|
||||
size?: number;
|
||||
opacity?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
.parent {
|
||||
width: 5px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1px 1px 0px 0px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#65e64c 0%,
|
||||
#8ef682 12.5%,
|
||||
#1ddae4 27.08%,
|
||||
#d2e555 38.77%,
|
||||
#f2f57b 46.35%,
|
||||
#fff04f 59.9%,
|
||||
#fec786 69.27%,
|
||||
#f8ada9 84.38%,
|
||||
#f96c6c 100%
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
position: relative;
|
||||
|
||||
> div:last-child {
|
||||
.levelLine {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.maxLimitText {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.level {
|
||||
width: 5px;
|
||||
position: relative;
|
||||
|
||||
.levelIcon {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.maxLimitText {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: -73px;
|
||||
font-size: 12px;
|
||||
color: #97a1ac;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.performanceArrow {
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.levelLine {
|
||||
position: absolute;
|
||||
background: #97a1ac;
|
||||
width: 7px;
|
||||
height: 1px;
|
||||
border-radius: 2px;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inActive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
114
src/components/AgentprogressMeter/AgentProgressMeter.tsx
Normal file
114
src/components/AgentprogressMeter/AgentProgressMeter.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Typography } from '@navi/web-ui/lib/primitives';
|
||||
import cx from 'classnames';
|
||||
import { LevelIcon } from 'src/assets/icons/LevelIcon';
|
||||
import PerformanceArrow from 'src/assets/icons/PerformanceArrow';
|
||||
import { formatAmount, shortNumberNotation } from 'src/utils/commonUtils';
|
||||
import styles from './AgentProgressMeter.module.scss';
|
||||
import { LEVEL_HEIGHT, MAX_LEVEL_GUARD_PERCENTAGE, MIN_LEVEL_GUARD_PERCENTAGE, PARENT_HEIGHT, levelColorsList, levelConstructList, levelConstructListBEType, levelConstructListType } from './constant';
|
||||
|
||||
|
||||
// const normaliseValues = (levelConstructList: Array<levelConstructListType>, currentLevel: number) => {
|
||||
// if (!currentLevel) return 1;
|
||||
// if (currentLevel > MAX_NUMBER_OF_LEVELS) return MAX_NUMBER_OF_LEVELS;
|
||||
// if (currentLevel < 1) return 1;
|
||||
// return false;
|
||||
// };
|
||||
|
||||
const getPercentageValue = (
|
||||
levelConstruct: levelConstructListType,
|
||||
currentCashCollected: number,
|
||||
maxLevel: number
|
||||
) => {
|
||||
if (!levelConstruct || !currentCashCollected) return 0;
|
||||
const percentage = Math.round(
|
||||
(Math.abs(currentCashCollected - levelConstruct.levelLowerLimit) /
|
||||
(levelConstruct.levelUpperLimit - levelConstruct.levelLowerLimit)) *
|
||||
100
|
||||
)
|
||||
if (maxLevel === levelConstruct.level && percentage > MAX_LEVEL_GUARD_PERCENTAGE) return MAX_LEVEL_GUARD_PERCENTAGE;
|
||||
if (1 === levelConstruct.level && percentage < MIN_LEVEL_GUARD_PERCENTAGE) return MIN_LEVEL_GUARD_PERCENTAGE;
|
||||
|
||||
if (percentage > 100) return 100;
|
||||
if (percentage < 0) return 0;
|
||||
if (isNaN(percentage)) return 0;
|
||||
|
||||
return percentage;
|
||||
};
|
||||
|
||||
const generateDivForLevels = (
|
||||
levelConstructList: Array<levelConstructListType>,
|
||||
currentLevel: number,
|
||||
cashCollected: number,
|
||||
maxLevel: number,
|
||||
fontStyle?: string,
|
||||
iconStyle?: string,
|
||||
parentStyle?: string,
|
||||
) => {
|
||||
// if (hasNullIssues(levelConstructList, currentLevel)) return null;
|
||||
const div = [];
|
||||
for (let i = 0; i < maxLevel; i++) {
|
||||
div.push(
|
||||
<div style={{ height: LEVEL_HEIGHT }} className={cx(styles.level, parentStyle)} key={i}>
|
||||
<div className={styles.levelIcon}>
|
||||
<LevelIcon fontClassName={iconStyle} level={i + 1} color={levelConstructList[i]?.color} />
|
||||
</div>
|
||||
<div className={styles.levelLine} />
|
||||
<span className={cx(styles.maxLimitText, fontStyle)}>
|
||||
<Typography variant="p3" style={{ cursor: 'default' }}>
|
||||
<span title={`${formatAmount(levelConstructList[i].levelUpperLimit)}`}>{`₹${shortNumberNotation(levelConstructList[i].levelUpperLimit)}`}</span>
|
||||
</Typography>
|
||||
</span>
|
||||
{i === currentLevel - 1 ? (
|
||||
<PerformanceArrow
|
||||
style={{
|
||||
bottom: `${getPercentageValue(
|
||||
levelConstructList[currentLevel - 1],
|
||||
cashCollected,
|
||||
maxLevel
|
||||
)}%`
|
||||
}}
|
||||
className={cx(styles.performanceArrow)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return div;
|
||||
};
|
||||
|
||||
interface AgentProgressMeterProps {
|
||||
currentLevel: number;
|
||||
cashCollected: number;
|
||||
levelConstructList: Array<levelConstructListBEType>;
|
||||
fontStyle?: string;
|
||||
iconStyle?: string;
|
||||
parentStyle?: string;
|
||||
maxLevel: number;
|
||||
}
|
||||
|
||||
const AgentProgressMeter: React.FC<AgentProgressMeterProps> = (props) => {
|
||||
const { currentLevel, levelConstructList, cashCollected, fontStyle, iconStyle, parentStyle, maxLevel } = props;
|
||||
const PARENT_HEIGHT = `${maxLevel * parseInt(LEVEL_HEIGHT)}px`;
|
||||
|
||||
const levelInfusedWithColors = levelConstructList?.map((levelConstruct, index) => {
|
||||
const level = levelConstruct.level;
|
||||
const levelLowerLimit = levelConstruct.levelLowerLimit;
|
||||
const levelUpperLimit = levelConstruct.levelUpperLimit;
|
||||
const color = levelColorsList[index];
|
||||
return {
|
||||
level,
|
||||
levelLowerLimit,
|
||||
levelUpperLimit,
|
||||
color
|
||||
};
|
||||
}
|
||||
);
|
||||
const renderDiv = generateDivForLevels(levelInfusedWithColors, currentLevel, cashCollected, maxLevel, fontStyle, iconStyle, parentStyle);
|
||||
return (
|
||||
<div style={{ height: PARENT_HEIGHT }} className={styles.parent}>
|
||||
{renderDiv}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentProgressMeter;
|
||||
78
src/components/AgentprogressMeter/constant.ts
Normal file
78
src/components/AgentprogressMeter/constant.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
export const levelColorsList = [
|
||||
'#F97474',
|
||||
'#FBB9A6',
|
||||
'#FEBA65',
|
||||
'#F3D260',
|
||||
'#FFEA06',
|
||||
'#E6EB00',
|
||||
'#47E1DC',
|
||||
'#5AE9B1',
|
||||
'#70EB5A'
|
||||
];
|
||||
|
||||
export const LEVEL_HEIGHT = '40px';
|
||||
export const MAX_LEVEL_GUARD_PERCENTAGE = 75;
|
||||
export const MIN_LEVEL_GUARD_PERCENTAGE = 25;
|
||||
export const MIN_LEVEL = 1;
|
||||
|
||||
export const levelConstructList = [
|
||||
{
|
||||
level: 1,
|
||||
levelLowerLimit: 25676.6,
|
||||
levelUpperLimit: 554464.91,
|
||||
},
|
||||
{
|
||||
level: 2,
|
||||
levelLowerLimit: 555717.36,
|
||||
levelUpperLimit: 876699.78,
|
||||
},
|
||||
{
|
||||
level: 3,
|
||||
levelLowerLimit: 882595.22,
|
||||
levelUpperLimit: 993750.74,
|
||||
},
|
||||
{
|
||||
level: 4,
|
||||
levelLowerLimit: 994443.69,
|
||||
levelUpperLimit: 1094499.45,
|
||||
},
|
||||
{
|
||||
level: 5,
|
||||
levelLowerLimit: 1098591.56,
|
||||
levelUpperLimit: 1187158.21,
|
||||
},
|
||||
{
|
||||
level: 6,
|
||||
levelLowerLimit: 1187421.42,
|
||||
levelUpperLimit: 1301905.05,
|
||||
},
|
||||
{
|
||||
level: 7,
|
||||
levelLowerLimit: 1302165.74,
|
||||
levelUpperLimit: 1923532.05,
|
||||
},
|
||||
{
|
||||
level: 8,
|
||||
levelLowerLimit: 1923532.74,
|
||||
levelUpperLimit: 3223532.05,
|
||||
},
|
||||
{
|
||||
level: 9,
|
||||
levelLowerLimit: 3223532.74,
|
||||
levelUpperLimit: 5223532.05,
|
||||
}
|
||||
];
|
||||
|
||||
export interface levelConstructListType {
|
||||
level: number;
|
||||
levelLowerLimit: number;
|
||||
levelUpperLimit: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
|
||||
export interface levelConstructListBEType {
|
||||
level: number;
|
||||
levelLowerLimit: number;
|
||||
levelUpperLimit: number;
|
||||
}
|
||||
@@ -239,25 +239,30 @@ const CashEarnedChartHC: React.FC<CashEarnedChartHCProps> = props => {
|
||||
size="h6"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
{!showDropdown ? (
|
||||
<span className={styles.titleWithDropdown}>
|
||||
{view === 'curr' ? (
|
||||
<span className={styles.darkGray}>
|
||||
Last {getDayofMonth()} day(s) cash collected
|
||||
</span>
|
||||
) : (
|
||||
<span className={styles.darkGray}>Cash collected last month</span>
|
||||
)}
|
||||
<b>
|
||||
{' '}
|
||||
{getFirstDate()} - {getLastDate(view)}
|
||||
</b>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cx(styles.titleContainer, titleContainerClass)}>
|
||||
{showDropdown ? (
|
||||
<>
|
||||
<span className={styles.titleWithDropdown}>Cash Collection Breakup</span>
|
||||
</>
|
||||
) : (
|
||||
<span className={styles.monthTitle}>
|
||||
{view === 'curr' ? (
|
||||
<span className={styles.darkGray}>Last {getDayofMonth()} days cash collected</span>
|
||||
) : (
|
||||
<span className={styles.darkGray}>Cash collected last month</span>
|
||||
)}
|
||||
<b>
|
||||
{' '}
|
||||
{getFirstDate()} - {getLastDate(view)}
|
||||
</b>
|
||||
</span>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
<div className={cx(styles.pieChart, pieChartContainerClass)}>
|
||||
<HighchartsReact highcharts={Highcharts} options={options} />
|
||||
|
||||
@@ -90,7 +90,7 @@ const CumulativeCashCollected: React.FC<ICumulativeCashCollected> = props => {
|
||||
const {
|
||||
data,
|
||||
width = 350,
|
||||
height = 133,
|
||||
height = 150,
|
||||
legendWrapperStyle,
|
||||
graphWrapperContainerClass = '',
|
||||
isWeekData = false
|
||||
|
||||
@@ -558,7 +558,11 @@
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding-right: 5px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
@@ -25,6 +25,9 @@ import { Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from 'recharts';
|
||||
import { PERFORMANCE_CHART_TYPE } from './leaderboardConstant';
|
||||
import { addClickstreamEvent } from '../../service/clickStreamEventService';
|
||||
import { CLICKSTREAM_EVENT_NAMES } from '../../service/clickStream.constant';
|
||||
import AgentProgressMeter from '../AgentprogressMeter/AgentProgressMeter';
|
||||
import { LevelIcon } from 'src/assets/icons/LevelIcon';
|
||||
import { levelColorsList } from '../AgentprogressMeter/constant';
|
||||
|
||||
export const LEVEL_ICONS = [
|
||||
<StarLevelOneIcon key={1} />,
|
||||
@@ -121,7 +124,11 @@ const Leaderboard = () => {
|
||||
</Typography>
|
||||
{leaderboard?.agentLevelRanking ? (
|
||||
<Typography variant="p5">
|
||||
{LEVEL_ICONS[leaderboard?.agentLevelRanking - 1]}
|
||||
<LevelIcon
|
||||
level={leaderboard?.agentLevelRanking}
|
||||
color={levelColorsList[leaderboard?.agentLevelRanking - 1]}
|
||||
/>
|
||||
{/* {LEVEL_ICONS[leaderboard?.agentLevelRanking - 1]} */}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="p5">-</Typography>
|
||||
@@ -172,14 +179,18 @@ const Leaderboard = () => {
|
||||
</Typography>
|
||||
<GridRow
|
||||
style={{
|
||||
padding: '0 32px 0 0',
|
||||
margin: 0,
|
||||
padding: '8px 32px 0 0',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
marginTop: '20px'
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<GridColumn sm={4}>
|
||||
<AgentProgressMeter
|
||||
cashCollected={leaderboard.cashCollectedInLast30Days}
|
||||
currentLevel={leaderboard.agentLevelRanking}
|
||||
levelConstructList={leaderboard.levelConstructList}
|
||||
maxLevel={leaderboard.maxLevel}
|
||||
/>
|
||||
{/* <GridColumn sm={4}>
|
||||
<Typography style={{ marginTop: `10px` }} variant="p5">
|
||||
{LEVEL_ICONS[6]}
|
||||
</Typography>
|
||||
@@ -201,15 +212,15 @@ const Leaderboard = () => {
|
||||
<Typography style={{ marginTop: `13px` }} variant="p5">
|
||||
{LEVEL_ICONS[0]}
|
||||
</Typography>
|
||||
</GridColumn>
|
||||
<GridColumn sm={3}>
|
||||
</GridColumn> */}
|
||||
{/* <GridColumn sm={3}>
|
||||
<RangeMeter
|
||||
levelConstructList={leaderboard.levelConstructList}
|
||||
agentLevelRanking={leaderboard.agentLevelRanking}
|
||||
cashCollectedInLast30Days={leaderboard.cashCollectedInLast30Days}
|
||||
maxLevel={leaderboard.maxLevel}
|
||||
/>
|
||||
</GridColumn>
|
||||
</GridColumn> */}
|
||||
</GridRow>
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
|
||||
@@ -16,6 +16,10 @@ import { LEVEL_ICONS } from './Leaderboard';
|
||||
import styles from './Leaderboard.module.scss';
|
||||
import cx from 'classnames';
|
||||
import { tickFormatterHandler } from 'src/utils/Chart.utils';
|
||||
import { LevelIcon } from 'src/assets/icons/LevelIcon';
|
||||
import { levelColorsList } from '../AgentprogressMeter/constant';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from 'src/store';
|
||||
|
||||
export enum formatYAxisTypes {
|
||||
COMPACT_FORMATTED_AMOUNT
|
||||
@@ -38,17 +42,25 @@ const PerformanceChart: React.FC<IPerformanceChart> = props => {
|
||||
const {
|
||||
data,
|
||||
width = 350,
|
||||
height = 133,
|
||||
height = 150,
|
||||
legendWrapperStyle,
|
||||
graphWrapperContainerClass = '',
|
||||
isWeekData = false
|
||||
} = props;
|
||||
|
||||
const maxPerformance = useSelector((state: RootState) => state.leaderboard.maxLevel);
|
||||
|
||||
const newData = data?.data?.map(item => ({
|
||||
...item,
|
||||
level: Number(item?.level?.replace('L', ''))
|
||||
}));
|
||||
|
||||
const yAxisLevels = [];
|
||||
|
||||
for (let i = 1; i <= maxPerformance; i++) {
|
||||
yAxisLevels.push(i);
|
||||
}
|
||||
|
||||
if (!newData) {
|
||||
return <div className={styles.dataNotFound}>Data Not Available</div>;
|
||||
}
|
||||
@@ -87,7 +99,7 @@ const PerformanceChart: React.FC<IPerformanceChart> = props => {
|
||||
/>
|
||||
<Tooltip wrapperStyle={{ outline: 'none' }} content={<CustomTooltip />} />
|
||||
<YAxis
|
||||
ticks={[1, 2, 3, 4, 5, 6, 7]}
|
||||
ticks={yAxisLevels}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={axisFontStyle}
|
||||
@@ -126,7 +138,12 @@ const CustomTooltip: React.FC<TooltipProps<ValueType, NameType>> = ({ active, pa
|
||||
}}
|
||||
>
|
||||
<p className={styles.perfLevel}>
|
||||
<span>Perf Level</span> {LEVEL_ICONS[(payload[0].value as number) - 1]}
|
||||
<span>Perf Level</span>{' '}
|
||||
<LevelIcon
|
||||
level={payload[0].value as number}
|
||||
color={levelColorsList[(payload[0].value as number) - 1]}
|
||||
/>
|
||||
{/* {LEVEL_ICONS[(payload[0].value as number) - 1]} */}
|
||||
</p>
|
||||
<p className={styles.date}>{`${dateFormat(new Date(label), 'DD MMM')}`}</p>
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,9 @@ import { PERFORMANCE_CHART_TYPE } from 'src/components/leaderboard/leaderboardCo
|
||||
import { FeedbackTypesCodeMap } from '../Cases/constants/CasesConstants';
|
||||
import { addClickstreamEvent } from '../../service/clickStreamEventService';
|
||||
import { CLICKSTREAM_EVENT_NAMES } from '../../service/clickStream.constant';
|
||||
import AgentProgressMeter from 'src/components/AgentprogressMeter/AgentProgressMeter';
|
||||
import { LevelIcon } from 'src/assets/icons/LevelIcon';
|
||||
import { levelColorsList } from 'src/components/AgentprogressMeter/constant';
|
||||
|
||||
const LEVEL_ICONS = [
|
||||
<StarLevelOneIcon key={1} />,
|
||||
@@ -417,7 +420,11 @@ const DashBoard = () => {
|
||||
<GridRow style={{ marginTop: '10px' }}>
|
||||
{leaderboard?.agentLevelRanking ? (
|
||||
<Typography variant="p5" className={styles.agentCurrLevelIcon}>
|
||||
{LEVEL_ICONS[leaderboard?.agentLevelRanking - 1]}
|
||||
<LevelIcon
|
||||
level={leaderboard?.agentLevelRanking}
|
||||
color={levelColorsList[leaderboard?.agentLevelRanking - 1]}
|
||||
/>
|
||||
{/* {LEVEL_ICONS[leaderboard?.agentLevelRanking - 1]} */}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="p5">--</Typography>
|
||||
@@ -428,7 +435,15 @@ const DashBoard = () => {
|
||||
{isAgentRangeMeterPresent ? (
|
||||
<GridRow className={styles.agentLevelContainer}>
|
||||
<GridColumn className={styles.leaderboardContainer}>
|
||||
<GridColumn className={styles.leaderboardIconContainer}>
|
||||
<AgentProgressMeter
|
||||
levelConstructList={leaderboard.levelConstructList}
|
||||
currentLevel={leaderboard.agentLevelRanking}
|
||||
cashCollected={leaderboard.cashCollectedInLast30Days}
|
||||
iconStyle={styles.agentLevelIcon}
|
||||
fontStyle={styles.agentLevelText}
|
||||
maxLevel={leaderboard.maxLevel}
|
||||
/>
|
||||
{/* <GridColumn className={styles.leaderboardIconContainer}>
|
||||
<Typography
|
||||
style={{ marginTop: `10px`, transform: 'rotate(-90deg) scale(0.6)' }}
|
||||
variant="p5"
|
||||
@@ -482,7 +497,7 @@ const DashBoard = () => {
|
||||
leaderboardAmountTextClass={styles.leaderboardAmountTextClass}
|
||||
leaderboardPointerStyle={leaderboardPointerStyle}
|
||||
/>
|
||||
</GridColumn>
|
||||
</GridColumn> */}
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
) : null}
|
||||
|
||||
@@ -180,14 +180,23 @@
|
||||
|
||||
.leaderboardContainer {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
top: 50px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: fit-content;
|
||||
transform: scale(1.8) rotate(90deg);
|
||||
transform: scale(1.6) rotate(90deg);
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
|
||||
.agentLevelIcon{
|
||||
transform: rotate(-90deg);
|
||||
scale: 0.8;
|
||||
}
|
||||
.agentLevelText{
|
||||
transform: rotate(-90deg) translate(4px, 0px);
|
||||
scale: 0.6;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
}
|
||||
.leaderboardIconContainer {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user