give
/
src
/
Campaigns
/
resources
/
admin
/
components
/
CampaignDetailsPage
/
Components
/
CampaignStats
/
PercentChangePill.tsx
PercentChangePill.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/PercentChangePill.tsx
| 1 | import styles from './styles.module.scss'; |
| 2 | import type {PercentChangePillProps} from './types'; |
| 3 | |
| 4 | /** |
| 5 | * @since 4.0.0 |
| 6 | */ |
| 7 | const getPercentageChange = (previousValue: number, currentValue: number) => { |
| 8 | if (previousValue === 0) { |
| 9 | return currentValue === 0 ? 0 : 100; |
| 10 | } |
| 11 | |
| 12 | const value = currentValue - previousValue / Math.abs(previousValue) * 100; |
| 13 | if (value !== 100) { |
| 14 | return value.toFixed(1); |
| 15 | } |
| 16 | |
| 17 | return value; |
| 18 | } |
| 19 | |
| 20 | const IconArrowUp = () => ( |
| 21 | <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 22 | <path d="M5.833 11.667 10 7.5l4.167 4.167H5.833z" fill="#2D802F"/> |
| 23 | </svg> |
| 24 | ); |
| 25 | |
| 26 | const IconArrowDown = () => ( |
| 27 | <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 28 | <path d="M10 12.5 5.833 8.335h8.334L10 12.501z" fill="#D92D0B"/> |
| 29 | </svg> |
| 30 | ) |
| 31 | |
| 32 | const IconArrowRight = () => ( |
| 33 | <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 34 | <path d="M8.334 14.167V5.834l4.166 4.167-4.166 4.166z" fill="#060C1A"/> |
| 35 | </svg> |
| 36 | ) |
| 37 | |
| 38 | /** |
| 39 | * @since 4.0.0 |
| 40 | */ |
| 41 | const PercentChangePill = ({value, comparison}: PercentChangePillProps) => { |
| 42 | const change = getPercentageChange(comparison, value); |
| 43 | |
| 44 | const [color, backgroundColor, symbol] = |
| 45 | change === 0 |
| 46 | ? ['#060c1a', '#f2f2f2', <IconArrowRight />] |
| 47 | : Number(change) > 0 |
| 48 | ? ['#2d802f', '#f2fff3', <IconArrowUp />] |
| 49 | : ['#e35f45', '#fff4f2', <IconArrowDown />]; |
| 50 | |
| 51 | return ( |
| 52 | <div className={styles.percentChangePill} style={{backgroundColor: backgroundColor, color: color}}> |
| 53 | {symbol} <span>{change}%</span> |
| 54 | </div> |
| 55 | ); |
| 56 | }; |
| 57 | |
| 58 | export default PercentChangePill; |
| 59 |