49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import { Icon } from 'UI';
|
|
import styles from './countBadge.css';
|
|
import cn from 'classnames';
|
|
|
|
const getFixedValue = (val) => {
|
|
let accuracy = 0;
|
|
while (Math.trunc(val * Math.pow(10, accuracy)) === 0) {
|
|
accuracy += 1;
|
|
}
|
|
const parsed = parseFloat(val).toFixed(accuracy).toString();
|
|
return parsed;
|
|
};
|
|
|
|
// eslint-disable-next-line complexity
|
|
const CountBadge = ({
|
|
title,
|
|
icon,
|
|
count = '',
|
|
unit = '',
|
|
change,
|
|
oppositeColors = false,
|
|
component,
|
|
className
|
|
}) => {
|
|
const viewChange = typeof change === 'number' && change !== 0 ;
|
|
const changeIncrease = change > 0;
|
|
const colorGreen = oppositeColors ? !changeIncrease : changeIncrease;
|
|
return (
|
|
<div className={ cn(className, 'flex items-baseline') }>
|
|
<div className={ cn(styles.countWrapper, 'flex items-baseline') }>
|
|
{ icon && <Icon name={ icon } size="18" marginRight="5" className={ styles.icon } /> }
|
|
<span className={ styles.count }> { component || count } </span>
|
|
<span className={ styles.unit }>{ unit }</span>
|
|
</div>
|
|
<div className={ cn(styles.change, 'ml-2') } data-colorgreen={ colorGreen }>
|
|
{ viewChange &&
|
|
<div>
|
|
<Icon size="10" name={ changeIncrease ? 'arrow-up' : 'arrow-down' } color={ colorGreen ? 'green' : 'red' } marginRight="5" />
|
|
{ `${ getFixedValue(change) }%` }
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
CountBadge.displayName = 'CountBadge';
|
|
|
|
export default CountBadge;
|